/* ============================================================================
   Cafetería del Padel — landing provisional de club.medware.com.mx

   TOKENS: son los del canon de la colmena (`medware-marca`), que a su vez son los
   de `medware-consulta` — el motor que la Fase B va a clonar sobre este repo. Se
   copian tal cual A PROPÓSITO: cuando esta página se mude al `web-admin` de Next,
   el marcado y las clases funcionan contra el `globals.css` de allí sin reescribir
   nada. No se inventa un cuarto dialecto de tokens.

   CONTRASTES MEDIDOS (calculados aquí el 2026-09-08 sobre estos valores, no
   copiados de otro repo — una anotación heredada es una medición de otro fondo):

     CLARO                                  OSCURO
       --ink   / --surface   17.37:1          --ink   / --surface   14.51:1
       --ink   / --bg        15.35:1          --ink   / --bg        16.20:1
       --ink-soft/--surface   7.61:1          --ink-soft/--surface   8.16:1
       --ink-soft/--bg        6.73:1          --ink-soft/--bg        9.11:1
       --accent/ --surface    5.17:1          --accent/ --surface    5.74:1
       --accent/ --bg         4.57:1          --accent/ --bg         6.40:1
       blanco  / --accent     5.17:1          --accent-ink/--accent  6.10:1

   🩸 POR ESO EL TEXTO SECUNDARIO DE ESTA PÁGINA ES `--ink-soft` Y NO `--muted`:
   `--muted` (#667085) sobre el fondo de página `--bg` (#eef1f7) da **4.40:1**, que
   NO llega al 4.5:1 de AA. Sobre `--surface` blanco sí (4.97:1). El token no es
   "accesible" o "inaccesible" por sí mismo: lo es contra el fondo donde acaba, y
   una landing pone casi todo su texto sobre `--bg`, no sobre tarjetas.

   🩸 Y POR ESO EL BORDE DEL BOTÓN NO ES `--border-strong`: #d3d9e3 sobre blanco da
   **1.42:1**, muy por debajo del 3:1 que pide el borde de un control. Se usa
   `--ink-soft` (6.73:1).

   TEMA: claro por defecto + `prefers-color-scheme: dark`. El canon manda que en la
   APP el tema lo elija el usuario (`[data-theme]`) y no la preferencia del sistema;
   aquí no hay cuenta ni sesión donde guardar esa elección, así que se sigue al
   sistema. El bloque `[data-theme="dark"]` queda declarado igual para que, al mudar
   esto dentro del web-admin, el selector de la app mande sin tocar el CSS.
   ============================================================================ */

:root {
  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e4e8f0;
  --border-strong: #d3d9e3;
  --ink: #131a2a;
  --ink-soft: #4a5468;
  --muted: #667085;

  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0ff;

  --warn: #b45309;
  --warn-soft: #fbeede;
  /* 🩸 EL `--warn` DEL CANON NO PASA AA COMO TEXTO EN CLARO, y no se ve leyéndolo: medido sobre
     la página ya renderizada, #b45309 sobre #fbeede da 4.40:1 y el mínimo es 4.5:1 (la píldora
     es de 12 px en negrita, así que NO cuenta como "texto grande"). `--warn` sigue valiendo para
     el borde y la barra de color; para el TEXTO se usa este tono más oscuro: 6.21:1. */
  --warn-ink: #92400e;

  /* tipografía: escala del canon, cuerpo 14 px (software de gestión, no folleto) */
  --font:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;

  /* espaciado: rejilla de 4 px, sin valores sueltos */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;

  /* radios: tres, no uno */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --w-texto: 720px;
  --w-pagina: 1100px;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
}

[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c1018;
    --surface: #161c28;
    --surface-2: #1c2430;
    --border: #28303f;
    --border-strong: #3a4659;
    --ink: #e8edf5;
    --ink-soft: #aab4c5;
    --muted: #8a93a8;

    --accent: #5b93ff;
    --accent-strong: #7aa7ff;
    --accent-ink: #08152f;
    --accent-soft: #18233c;

    --warn: #fbbf24;
    --warn-soft: #2a2210;
    /* En oscuro el propio --warn como texto da 9.42:1: no hace falta oscurecerlo. */
    --warn-ink: #fbbf24;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1018;
  --surface: #161c28;
  --surface-2: #1c2430;
  --border: #28303f;
  --border-strong: #3a4659;
  --ink: #e8edf5;
  --ink-soft: #aab4c5;
  --muted: #8a93a8;

  --accent: #5b93ff;
  --accent-strong: #7aa7ff;
  --accent-ink: #08152f;
  --accent-soft: #18233c;

  --warn: #fbbf24;
  --warn-soft: #2a2210;
  --warn-ink: #fbbf24;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Una sola regla global de foco, como manda el canon. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  background: var(--surface);
  color: var(--ink);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-soft);
  z-index: 10;
}

.skip-link:focus {
  left: var(--s4);
}

.ancho {
  max-width: var(--w-pagina);
  margin: 0 auto;
  padding: 0 var(--s6);
}

/* ---- barra ---- */
.barra {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.barra-inner {
  max-width: var(--w-pagina);
  margin: 0 auto;
  padding: var(--s4) var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-14);
}

.marca {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marca-sep {
  color: var(--ink-soft);
}

.marca-producto {
  color: var(--ink-soft);
}

/* ---- hero: el único foco de la página ---- */
.hero {
  padding: var(--s8) 0;
}

.hero .ancho {
  max-width: var(--w-texto);
  margin: 0;
  padding-left: max(var(--s6), calc((100vw - var(--w-pagina)) / 2 + var(--s6)));
  padding-right: var(--s6);
}

/* El estado NO se comunica sólo con color: lleva punto Y texto. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  background: var(--warn-soft);
  color: var(--warn-ink);
  border: 1px solid currentColor;
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.punto {
  width: var(--s2);
  height: var(--s2);
  border-radius: var(--r-full);
  background: currentColor;
}

h1 {
  margin: 0;
  font-size: var(--fs-30);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tagline {
  margin: var(--s1) 0 var(--s4);
  color: var(--ink-soft);
  font-size: var(--fs-20);
}

.entrada {
  margin: 0 0 var(--s4);
  font-size: var(--fs-16);
  max-width: var(--w-texto);
}

.aviso {
  margin: 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  max-width: var(--w-texto);
}

.aviso strong {
  color: var(--ink);
}

/* ---- secciones ---- */
.seccion {
  padding: var(--s8) 0;
  border-top: 1px solid var(--border);
}

.seccion-alt {
  background: var(--surface-2);
}

h2 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-24);
  line-height: 1.25;
}

h3 {
  margin: 0 0 var(--s1);
  font-size: var(--fs-16);
  line-height: 1.3;
}

.sub {
  margin: 0 0 var(--s6);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  max-width: var(--w-texto);
}

.nota {
  margin: var(--s6) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-14);
  max-width: var(--w-texto);
}

.rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  box-shadow: var(--shadow-1);
}

.tarjeta p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-14);
}

.lista {
  margin: 0;
  padding-left: var(--s6);
  max-width: var(--w-texto);
  font-size: var(--fs-14);
  color: var(--ink-soft);
}

.lista li {
  margin-bottom: var(--s2);
}

/* ---- botón ---- */
.btn {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: 600;
}

.btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ---- pie ---- */
.pie {
  border-top: 1px solid var(--border);
  padding: var(--s6) 0;
  color: var(--ink-soft);
  font-size: var(--fs-12);
}

.pie-sep {
  margin: 0 var(--s2);
}

@media (max-width: 860px) {
  .hero .ancho {
    padding-left: var(--s6);
  }

  h1 {
    font-size: var(--fs-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}