/* B2B · C0 · Piel provisional del coach.
   Sobria y NEUTRA a propósito: ni un color, ni una tipografía, ni un activo de
   Futempo (ADR-79 D2). El sistema visual real se decide con la marca (D9). */

:root {
  --fondo: #12141a;
  --panel: #1a1d25;
  --texto: #e8e9ec;
  --tenue: #9aa0ad;
  --borde: #2c313c;
  --acento: #5b7cfa;
  --error: #f08a8a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.pantalla {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 28px 24px;
}

.sello {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
}

h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; }

.cue { margin: 0 0 20px; color: var(--tenue); font-size: 14px; }

label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--tenue); }

input {
  width: 100%;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;   /* 16px: iOS no hace zoom al enfocar */
}

input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: var(--acento);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

button:disabled { opacity: .55; cursor: default; }

.msg { margin: 14px 0 0; min-height: 20px; font-size: 14px; color: var(--tenue); }
.msg.error { color: var(--error); }

/* C2 · la puerta del cliente: pasos, opciones y consentimiento. */
.paso[hidden] { display: none !important; }

.alterna { margin: 16px 0 0; font-size: 14px; color: var(--tenue); text-align: center; }
.alterna a { color: var(--acento); cursor: pointer; text-decoration: underline; }

.opciones { display: grid; gap: 10px; }

.opcion {
  width: 100%;
  padding: 14px;
  text-align: left;
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-weight: 400;
}
.opcion:hover, .opcion:focus-visible { border-color: var(--acento); outline: none; }
.opcion b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.opcion span { display: block; font-size: 13px; color: var(--tenue); }

/* El consentimiento: la casilla nunca premarcada, y el literal a su lado sin recortar. */
.acepto { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; cursor: pointer; }
.acepto input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.acepto .cue { margin: 0; }
.acepto a { color: var(--acento); }

.nota { margin: 8px 0 16px; font-size: 12px; color: var(--tenue); opacity: .8; }

/* ============================================================
   C6 · La WEB PÚBLICA del preparador: la otra cara de `index.html`
   Móvil primero y sin adornos: quien la abre viene de un enlace de Instagram o de un QR en
   un gimnasio, con una mano y mala conexión. El «Ya entreno aquí» va ARRIBA, en la barra,
   para que se vea sin hacer scroll (condición de Dirección).
   ============================================================ */
.web-publica{text-align:left;max-width:520px;margin:0 auto;padding-bottom:28px}
.web-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.web-marca{display:flex;align-items:center;gap:8px;min-width:0}
.web-marca b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-logo{width:32px;height:32px;object-fit:contain;border-radius:8px;flex:0 0 auto}
/* C6.1 · «Ya entreno aquí» y «Entrar con este código» son <a> y `coach.css` no tiene regla
   global de enlace, así que se pintaban con el AZUL POR DEFECTO del navegador: 1,96:1 sobre
   este fondo, y 1,67:1 una vez visitados. Ilegible, no «poco contraste». Van con color
   explícito (15,16:1 y 12,92:1 medidos sobre --fondo) y con foco visible, que son enlaces que
   se pulsan en un móvil. */
.web-entrar{flex:0 0 auto;font-size:.85rem;text-decoration:underline;cursor:pointer;
  color:var(--texto)}
.web-entrar:visited{color:var(--texto)}
.web-entrar:focus-visible,.web-usar-codigo:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
.web-foto{width:100%;max-height:260px;object-fit:cover;border-radius:14px;margin-bottom:16px}
.web-titulo{margin:0 0 10px;line-height:1.15}
.web-texto{margin:0 0 20px;white-space:pre-wrap;line-height:1.55}
.web-cta{display:block;text-align:center;padding:14px 18px;border-radius:12px;
  background:var(--acento,#3b82f6);color:#fff;font-weight:700;text-decoration:none}
.web-codigo{margin-top:18px;padding:14px;border:1px dashed var(--linea,rgba(255,255,255,.18));border-radius:12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.web-codigo-lbl{flex:1 1 100%;font-size:.78rem;opacity:.7}
.web-codigo-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;letter-spacing:1px}
.web-copiar{padding:6px 12px;font-size:.85rem;width:auto}
.web-usar-codigo{flex:1 1 100%;font-size:.85rem;text-decoration:underline;color:var(--texto);opacity:.92}
.web-usar-codigo:visited{color:var(--texto)}
.web-pie{margin:28px 0 0;font-size:.72rem;opacity:.72;text-align:center}   /* .55 daba 5,27:1; .72 sube a 8,21:1 y sigue siendo un pie discreto */