/* ===== 00-tokens.css ===== */
/*
 * CLOOB — tokens.
 *
 * Traducción a web del Sistema de Diseño Visual CLOOB (v1.0 · 2026) con dos
 * decisiones propias de esta web, tomadas a propósito:
 *   · El fondo dominante es el deep #090122 (navy-950), no el azul marino:
 *     es lo que distingue cloobfootball.com de boowl.app. Se alterna siempre
 *     con bloques blancos; nunca hay dos deep seguidos ni una página entera oscura.
 *   · Una sola familia: Poppins. 800 para titulares (caja normal, tracking
 *     apretado), 600/700 para subtítulos y botones, 400/500 para el cuerpo.
 *
 * Lo que no se negocia (del manual): un solo elemento rojo por vista, números
 * de sección grandes como firma, hairlines de 1 px, radios 0/8/pill, ni
 * degradados ni glow ni rejillas de fondo.
 */

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-800-latin.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-800-latin-ext.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Color de marca (tabla §15 del manual + rampa navy del sistema) ---- */
  --deep: #090122; /* fondo dominante de esta web */
  --deep-2: #0f0a2e; /* segundo tono para tarjetas y bloques dentro del deep */
  --deep-3: #151038;
  --deep-4: #1b1547;
  --panel: #1b2a5e; /* barra de panel del producto */

  --navy: #013369; /* titulares sobre blanco, azul del logotipo */
  --blue: #004080; /* estructura, enlaces, botón primario sobre blanco */
  --blue-hover: #013369;
  --blue-active: #01254c;
  --blue-subtle: #e4edf9;
  --blue-200: #c9d5e6;

  --red: #df3448; /* acento: una pieza por vista */
  --red-hover: #c22b3c;
  --red-active: #a8232f;
  --red-bright: #ff4649; /* el coral del logotipo, para el acento sobre deep */
  --red-text: #c22b3c; /* rojo como texto sobre claro (contraste) */
  --red-subtle: #ffe1e2;

  /* --- Superficies y texto (se reescriben en los bloques deep) ------------ */
  --bg: #ffffff;
  --surface: #f7f8fb;
  --surface-2: #f1f3f8;
  --border: #e2e7f0;
  --border-strong: #cfd6e4;

  --heading: #013369;
  --text: #1b1547;
  --text-2: #463f5c;
  --text-3: #65617a;
  --text-faint: #a7aec0; /* sólo metadatos y decoración: 2.3:1, no para leer */

  --card: #ffffff;
  --accent: var(--red);
  --accent-text: var(--red-text);

  /* --- Semánticos ---------------------------------------------------------- */
  --success: #2e8b57;
  --success-bg: #e3f3ea;
  --warning: #e8a213;
  --warning-bg: #fcf1dc;
  --error: #9e2242;
  --error-bg: #f7e2e7;
  --info: #2c6fc4;
  --info-bg: #e4edf9;

  /* --- Tipografía ---------------------------------------------------------- */
  --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --text-display: 800 clamp(44px, 7vw, 96px) / 0.95 var(--font);
  --text-h1: 800 clamp(36px, 5.4vw, 68px) / 1.02 var(--font);
  --text-h2: 800 clamp(28px, 3.8vw, 46px) / 1.06 var(--font);
  --text-h3: 700 clamp(20px, 2.2vw, 24px) / 1.2 var(--font);
  --text-h4: 600 18px/1.3 var(--font);
  --text-body-lg: 400 18px/1.6 var(--font);
  --text-body: 400 16px/1.6 var(--font);
  --text-small: 400 14px/1.55 var(--font);
  --text-support: 500 14px/1.55 var(--font);
  --text-caption: 500 12px/1.4 var(--font);
  --text-label: 600 11px/1 var(--font);
  --text-button: 600 15px/1 var(--font);
  --text-stat-xl: 800 clamp(48px, 8vw, 112px) / 0.9 var(--font);
  --text-stat-lg: 800 clamp(36px, 5vw, 56px) / 1 var(--font);
  --text-stat-md: 800 32px/1 var(--font);

  --ls-display: -0.03em;
  --ls-heading: -0.025em;
  --ls-tight: -0.015em;
  --ls-stat: -0.04em;
  --ls-label: 0.14em;

  /* --- Espaciado, rejilla, forma (escala base 4) --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 128px;

  --section-y: clamp(64px, 8vw, 120px);
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: 20px;
  --grid-gap: 16px;
  --card-pad: 20px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(9, 1, 34, 0.08);
  --shadow-md: 0 6px 18px rgba(9, 1, 34, 0.12);
  --shadow-lg: 0 18px 44px rgba(9, 1, 34, 0.22);
  --shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 3px rgba(255, 70, 73, 0.38);

  /* --- Motion --------------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-count: 800ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.34, 1.3, 0.64, 1); /* el único overshoot: revelar un dato */

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --nav-height: 60px;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 28px;
    --grid-gap: 20px;
    --card-pad: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --grid-gap: 24px;
    --nav-height: 72px;
  }
}

/* ===== 10-base.css ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dialog {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

strong {
  font-weight: 600;
  color: inherit;
}

::selection {
  background: var(--red);
  color: #fff;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Voces tipográficas ----------------------------------------------------
   Poppins 800 en caja normal y tracking apretado para los titulares; el
   titular es un elemento gráfico, no una etiqueta. Mayúsculas sólo en
   rótulos, badges y overlines.                                             */

.display {
  font: var(--text-display);
  letter-spacing: var(--ls-display);
  color: var(--heading);
  text-wrap: balance;
}

h1 {
  font: var(--text-h1);
  letter-spacing: var(--ls-display);
  color: var(--heading);
  text-wrap: balance;
}

h2 {
  font: var(--text-h2);
  letter-spacing: var(--ls-heading);
  color: var(--heading);
  text-wrap: balance;
}

h3 {
  font: var(--text-h3);
  letter-spacing: var(--ls-tight);
  color: var(--heading);
  text-wrap: balance;
}

h4 {
  font: var(--text-h4);
  letter-spacing: -0.01em;
  color: var(--heading);
}

.lead {
  font: var(--text-body-lg);
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* La palabra acento del titular. Una por titular, nunca dos. */
.accent {
  color: var(--accent);
}

/* Overline: el rótulo tracked que va encima de cada bloque. */
.overline {
  display: block;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.label {
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.caption {
  font: var(--text-caption);
  color: var(--text-3);
}

.small {
  font: var(--text-small);
  color: var(--text-2);
}

/* Cifras: Poppins 800, siempre tabulares. */
.stat-xl,
.stat-lg,
.stat-md {
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-stat);
  color: var(--heading);
}

.stat-xl {
  font: var(--text-stat-xl);
}

.stat-lg {
  font: var(--text-stat-lg);
}

.stat-md {
  font: var(--text-stat-md);
  letter-spacing: -0.03em;
}

/* Número de sección: la firma del sistema. Dos dígitos, 800, nunca en un
   círculo, nunca con punto. Azul sobre blanco; blanco al 24 % sobre deep. */
.num {
  display: block;
  font: 800 clamp(22px, 2.6vw, 28px) / 1 var(--font);
  letter-spacing: -0.05em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.num--lg {
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.06em;
}

/* Micro-acento rojo de 4 px: el único adorno permitido. */
.rule {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
}

/* --- Utilidades ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide {
  max-width: var(--container-wide);
}

.wrap--narrow {
  max-width: var(--container-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(40px, 5vw, 72px);
}

.section--deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* --- Bloques de fondo: el ritmo de la página ---------------------------------
   deep · blanco · surface · deep · blanco … El deep manda pero siempre se
   alterna. Sobre deep se reescriben los tokens de texto, borde y superficie. */

.section--surface {
  background: var(--surface);
}

.section--deep,
.section--deep-2 {
  --bg: transparent;
  --heading: #ffffff;
  --text: #ffffff;
  --text-2: rgba(233, 243, 249, 0.76);
  --text-3: #a7aec0;
  --text-faint: rgba(233, 243, 249, 0.4);
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --card: var(--deep-3);
  --blue-subtle: rgba(255, 255, 255, 0.1);
  --accent: var(--red-bright);
  --accent-text: var(--red-bright);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  color: #fff;
}

.section--deep {
  background: var(--deep);
}

.section--deep-2 {
  background: var(--deep-2);
}

.section--deep .num,
.section--deep-2 .num {
  color: rgba(255, 255, 255, 0.24);
}

.section--deep .rule,
.section--deep-2 .rule {
  background: var(--red-bright);
}

/* Bloque deep seguido de otro deep: hairline entre los dos. */
.section--deep + .section--deep,
.section--deep-2 + .section--deep,
.section--deep + .section--deep-2 {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 12px 20px;
  background: var(--red);
  color: #fff;
  font: var(--text-button);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Los hijos de una rejilla tienen min-width:auto y pueden ensanchar la página
   entera. El scroll horizontal vive dentro de .table-scroll y en ningún otro sitio. */
.grid > *,
.split > *,
.cols > * {
  min-width: 0;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split--wide-left {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .split--wide-right {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  /* Alterna el lado de la imagen sin tocar el orden del DOM. */
  .split--flip > :first-child {
    order: 2;
  }
}

/* ===== 20-layout.css ===== */
/* --- Cabecera ----------------------------------------------------------------
   Deep, fija, 60/72 px. Transparente sobre el hero (que también es deep) y
   con borde hairline al hacer scroll. El botón de la barra es blanco: el rojo
   se reserva para la acción dentro de la página.                            */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: rgba(9, 1, 34, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  color: #fff;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.site-header.is-stuck {
  background: rgba(9, 1, 34, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__logo {
  height: 40px;
  width: auto;
}

.nav {
  display: none;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font: 500 15px/1 var(--font);
  color: rgba(233, 243, 249, 0.82);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link.is-current,
.nav__link[aria-expanded='true'] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav__link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* Selector de idioma: pequeño, en mayúsculas y con borde para separarlo del resto. */
.nav__lang {
  height: 30px;
  padding: 0 9px;
  margin-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Menú desplegable: tarjeta blanca con las páginas y una línea de descripción.
   Se abre con hover o teclado (focus-within) y con click en pantallas táctiles. */
.menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 70;
  min-width: 300px;
  padding: 10px;
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
}

.menu--wide {
  min-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  padding: 18px;
}

.menu--wide .menu__group {
  display: contents;
}

.nav__item:hover > .menu,
.nav__item:focus-within > .menu,
.nav__item.is-open > .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Puente invisible para que el ratón no "caiga" entre el enlace y el menú. */
.nav__item::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 12px;
}

.menu__title {
  grid-column: 1 / -1;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px 6px;
}

.menu__title + .menu__link {
  margin-top: 0;
}

.menu__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.menu__link:hover,
.menu__link:focus-visible {
  background: var(--surface);
}

.menu__link .num {
  font-size: 15px;
  padding-top: 3px;
  color: var(--blue-200);
  letter-spacing: -0.03em;
  min-width: 2ch;
}

.menu__link:hover .num {
  color: var(--red);
}

.menu__link b {
  display: block;
  font: 600 15px/1.3 var(--font);
  color: var(--heading);
}

.menu__link span {
  display: block;
  margin-top: 2px;
  font: var(--text-small);
  color: var(--text-3);
}

.menu__foot {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: var(--text-small);
  color: var(--text-2);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 380px) {
  .site-header__actions .btn--sm {
    padding: 0 12px;
  }
}

.site-header__login {
  display: none;
  font: 500 14px/1 var(--font);
  color: rgba(233, 243, 249, 0.82);
  padding: 0 10px;
}

.site-header__login:hover {
  color: #fff;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
}

.burger span {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-fast);
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú móvil: pantalla completa deep, grupos con overline y el CTA rojo
   anclado abajo. */
.mobile-menu {
  position: fixed;
  inset: var(--nav-height) 0 0;
  z-index: 55;
  background: var(--deep);
  color: #fff;
  padding: 16px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-menu__group {
  padding: 14px 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu__group .overline {
  color: #a7aec0;
  margin-bottom: 4px;
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font: 700 clamp(19px, 5.5vw, 24px) / 1.1 var(--font);
  letter-spacing: -0.02em;
  color: #fff;
}

.mobile-menu__link .num {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

.mobile-menu__link--top {
  font-size: clamp(24px, 7vw, 30px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu__foot {
  position: relative;
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  gap: 12px;
}

/* --- Pie ---------------------------------------------------------------------
   Bloque deep con hairline superior; la palabra gigante recortada abajo. */

.site-footer {
  position: relative;
  background: var(--deep);
  color: #fff;
  --heading: #ffffff;
  --text: #ffffff;
  --text-2: rgba(233, 243, 249, 0.76);
  --text-3: #a7aec0;
  --border: rgba(255, 255, 255, 0.14);
  padding-block: clamp(48px, 7vw, 88px) 24px;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__grid {
  display: grid;
  gap: 40px;
}

.footer__brandcol {
  max-width: 36ch;
}

.footer__logo {
  height: 34px;
  width: auto;
}

.footer__tagline {
  margin-top: 18px;
  color: var(--text-2);
  font: var(--text-body);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}

.footer__title {
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

.footer__list li + li {
  margin-top: 10px;
}

.footer__list a {
  font: var(--text-small);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover {
  color: #fff;
}

.footer__bottom {
  position: relative;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font: var(--text-caption);
  color: var(--text-3);
}

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

.footer__legal a:hover {
  color: #fff;
}

/* Tipografía como gráfico: una palabra, recortada por el borde inferior. */
.footer__word {
  position: absolute;
  left: 50%;
  bottom: -0.32em;
  transform: translateX(-50%);
  z-index: -1;
  font: 800 min(28vw, 340px) / 0.75 var(--font);
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 64px;
  }

  .footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .site-header__login {
    display: inline-flex;
  }

  .burger,
  .mobile-menu {
    display: none;
  }

  .brand__logo {
    height: 50px;
  }
}

/* ===== 30-components.css ===== */
/* --- Botones -----------------------------------------------------------------
   Radio 8, altura 44/36/52, Poppins 600. Hover oscurece un paso, press escala
   0.97, foco anillo coral. Sin ripple, sin sombras flotantes.                */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-md);
  padding: 0 22px;
  border-radius: var(--radius-md);
  font: var(--text-button);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
  touch-action: manipulation;
}

.btn:active {
  transform: scale(0.97);
}

.btn__arrow {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn__icon {
  width: 18px;
  height: 18px;
}

/* Primario: azul sobre blanco, blanco sobre deep. */
.btn--primary {
  background: var(--blue);
  color: #fff;
}

.btn--primary:hover {
  background: var(--blue-hover);
}

.btn--primary:active {
  background: var(--blue-active);
}

.section--deep .btn--primary,
.section--deep-2 .btn--primary,
.site-footer .btn--primary,
.mobile-menu .btn--primary,
.site-header .btn--primary {
  background: #fff;
  color: var(--navy);
}

.section--deep .btn--primary:hover,
.section--deep-2 .btn--primary:hover,
.site-footer .btn--primary:hover,
.mobile-menu .btn--primary:hover,
.site-header .btn--primary:hover {
  background: var(--blue-200);
}

/* Acento: la pieza roja de la vista. Una por pantalla. */
/* Blanco sobre #DF3448 da 4.4:1 y sobre el coral #FF4649 3.4:1: ninguno llega
   a AA en texto de botón. El botón usa el rojo oscuro (#C22B3C, 5.5:1) y el
   rojo de marca queda para titulares y acentos grandes. */
.btn--accent {
  background: var(--red-hover);
  color: #fff;
  font-weight: 700;
}

.btn--accent:hover {
  background: var(--red-active);
}

.btn--accent:active {
  background: #8f1d27;
}

.btn--outline {
  border: 1px solid var(--border-strong);
  color: var(--heading);
}

.btn--outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.section--deep .btn--outline,
.section--deep-2 .btn--outline,
.mobile-menu .btn--outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.section--deep .btn--outline:hover,
.section--deep-2 .btn--outline:hover,
.mobile-menu .btn--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.btn--ghost {
  color: var(--text-2);
}

.btn--ghost:hover {
  background: var(--surface);
  color: var(--blue);
}

.btn--lg {
  height: var(--control-lg);
  padding: 0 28px;
  font-size: 16px;
}

.btn--sm {
  height: var(--control-sm);
  padding: 0 16px;
  font: 600 14px/1 var(--font);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Enlace de acción: verbo + objeto, flecha, hover rojo. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1 var(--font);
  color: var(--blue);
  transition: color var(--dur-fast) var(--ease-out);
}

.section--deep .link-action,
.section--deep-2 .link-action {
  color: #fff;
}

.link-action:hover {
  color: var(--accent-text);
}

.link-action span {
  transition: transform var(--dur-base) var(--ease-out);
}

.link-action:hover span {
  transform: translateX(3px);
}

/* Nota bajo un CTA: "Sin tarjeta · 7 días". */
.cta-note {
  font: var(--text-small);
  color: var(--text-3);
}

/* --- Chips y tags -----------------------------------------------------------
   Los chips de funcionalidad del hero: píldora, hairline, sentence case.    */

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font: 500 14px/1 var(--font);
  color: var(--text-2);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.chip--plain::before {
  display: none;
}

.chip[aria-selected='true'],
.chip.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.section--deep .chip[aria-selected='true'],
.section--deep-2 .chip[aria-selected='true'] {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--blue-subtle);
  font: 600 12px/1 var(--font);
  color: var(--blue);
  white-space: nowrap;
}

.section--deep .tag,
.section--deep-2 .tag {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tag--red {
  background: var(--red-subtle);
  color: var(--red-text);
}

.section--deep .tag--red,
.section--deep-2 .tag--red {
  background: var(--red-bright);
  color: #fff;
}

/* --- Superficies ---------------------------------------------------------------
   Radio 8, hairline de 1 px, sin sombra en reposo.                            */

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.card--lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card--top {
  border-top: 3px solid var(--blue);
}

.card--top-red {
  border-top: 3px solid var(--red);
}

.section--deep .card--top,
.section--deep-2 .card--top {
  border-top-color: #fff;
}

/* Marco de una captura de producto. */
.shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.shot img {
  width: 100%;
  height: auto;
}

.shot--plain {
  background: transparent;
}

.shot--framed {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.section--deep .shot--framed,
.section--deep-2 .shot--framed {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-dark);
}

/* --- Listas de puntos ----------------------------------------------------------
   Sin iconos dentro de círculos: un guion azul (rojo si es el destacado). */

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

.checks li {
  position: relative;
  padding-left: 30px;
  font: var(--text-body);
  color: var(--text-2);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
}

.section--deep .checks li::before,
.section--deep-2 .section .checks li::before,
.section--deep-2 .checks li::before {
  background: var(--red-bright);
}

.checks li b {
  color: var(--heading);
  font-weight: 600;
}

@media (min-width: 560px) {
  .checks--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
  }
}

/* --- Cabecera de sección --------------------------------------------------------
   Overline + número (opcional) + H2 + lead.                                    */

.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 56px);
  max-width: 64ch;
}

.section-head h2 {
  max-width: 22ch;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section-head--center h2 {
  max-width: 24ch;
}

.section-head--wide {
  max-width: none;
}

.section-head .rule {
  margin: -4px 0;
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: end;
    gap: 40px;
    max-width: none;
  }

  .section-head--split > .overline,
  .section-head--split > .rule,
  .section-head--split > .num {
    grid-column: 1 / -1;
  }

  .section-head--split h2 {
    max-width: 16ch;
  }
}

/* --- Módulos numerados --------------------------------------------------------
   Rejilla de tarjetas con hairlines compartidas. Donde un SaaS pone un icono
   dentro de un círculo, CLOOB pone un número.                                 */

.modules {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.module {
  position: relative;
  background: var(--card);
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 10px;
  align-content: start;
  transition: background-color var(--dur-base) var(--ease-out);
}

.module:hover {
  background: var(--surface);
}

.section--deep .module,
.section--deep-2 .module {
  background: transparent;
}

.section--deep .module:hover,
.section--deep-2 .module:hover {
  background: rgba(255, 255, 255, 0.05);
}

.module h3 {
  font: var(--text-h4);
  letter-spacing: -0.01em;
}

.module p {
  font: var(--text-body);
  color: var(--text-2);
}

.module--link {
  color: inherit;
}

.module--link:hover h3 {
  color: var(--accent-text);
}

.module--link h3 {
  transition: color var(--dur-fast) var(--ease-out);
}

.module .link-action {
  margin-top: 6px;
}

@media (min-width: 640px) {
  .modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modules--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modules--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Datos ------------------------------------------------------------------------ */

.stat-block {
  display: grid;
  gap: 8px;
}

.stat-block .overline {
  order: 1;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
}

@media (min-width: 700px) {
  .stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Panel de sección: barra sólida con rótulo centrado sobre una tabla o lista.
   Dispositivo característico del producto. */
.panel-bar {
  display: block;
  padding: 10px 16px;
  background: var(--panel);
  color: #fff;
  text-align: center;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* --- Acordeón (FAQ) --------------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--border);
}

.accordion__item {
  border-bottom: 1px solid var(--border);
}

.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font: var(--text-h4);
  color: var(--heading);
}

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

.accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--red);
  transition: transform var(--dur-base) var(--ease-out);
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__item[open] .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion__a {
  padding: 0 4px 22px;
  color: var(--text-2);
  font: var(--text-body);
  max-width: 68ch;
}

.accordion__a a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section--deep .accordion__a a {
  color: #fff;
}

/* --- Formularios y modales ----------------------------------------------------
   Los formularios son de Brevo y van en iframe dentro de un <dialog>. El
   src se pone al abrir: siete iframes en cada página serían un despropósito. */

.modal {
  width: min(96vw, 640px);
  max-height: 92vh;
  margin: auto; /* el reset quita el margen a dialog; sin esto se pega a la izquierda */
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal::backdrop {
  background: rgba(9, 1, 34, 0.72);
  backdrop-filter: blur(4px);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.modal__head h2 {
  font: var(--text-h3);
}

.modal__head p {
  margin-top: 4px;
  font: var(--text-small);
  color: var(--text-2);
}

.modal__close {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.modal__close:hover {
  background: var(--surface);
  color: var(--heading);
}

.modal__close svg {
  width: 16px;
  height: 16px;
}

.modal__body {
  max-height: calc(92vh - 90px);
  overflow: auto;
}

.modal__iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}

.modal__form {
  padding: 20px;
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font: 600 13px/1.2 var(--font);
  color: var(--heading);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: var(--control-md);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font: var(--text-body);
  color: var(--text);
}

.field textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.field--check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}

.field--check label {
  font: var(--text-small);
  color: var(--text-2);
}

.field--check a {
  color: var(--blue);
  text-decoration: underline;
}

.form-note {
  font: var(--text-caption);
  color: var(--text-3);
}

@media (min-width: 560px) {
  .modal__form--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal__form--2 .field--full,
  .modal__form--2 .field--check,
  .modal__form--2 .form-note,
  .modal__form--2 .btn {
    grid-column: 1 / -1;
  }
}

/* --- Migas de pan y cabecera de página interior ------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.breadcrumb a:hover {
  color: var(--heading);
}

.breadcrumb [aria-current] {
  display: inline-block;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* --- Aviso -------------------------------------------------------------------- */

.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  background: var(--surface);
  font: var(--text-body);
  color: var(--text-2);
}

.notice a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Banner de cookies ---------------------------------------------------- */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
}

.consent[hidden] {
  display: none;
}

.consent__box {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: var(--deep-2, #0f0a2e);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.consent__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.consent__text a {
  color: #fff;
  text-decoration: underline;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.consent .btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 720px) {
  .consent__box {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ===== 40-sections.css ===== */
/* --- Hero --------------------------------------------------------------------
   Deep. Titular a la izquierda, captura de producto a la derecha, chips de
   funcionalidad y un único botón rojo. El LCP es el titular.                */

.hero {
  position: relative;
  padding-block: calc(var(--nav-height) + 40px) clamp(48px, 6vw, 88px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.hero__title {
  margin-block: 18px 0;
}

/* Rótulo con la keyword de la página, entre las migas y el titular. */
.hero__kicker {
  margin-top: 18px;
  color: var(--red-bright);
}

.hero__kicker + .hero__title {
  margin-top: 10px;
}

.hero__lead {
  margin-top: 22px;
  max-width: 50ch;
}

.hero__actions {
  margin-top: 30px;
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.hero__actions .btn {
  width: 100%;
}

.hero__chips {
  margin-top: 22px;
}

.hero__visual {
  position: relative;
  min-width: 0;
}

.hero__visual img {
  width: 100%;
  height: auto;
}

/* Palabra gigante recortada por el borde: tipografía como gráfico. */
.hero__word {
  position: absolute;
  right: -0.06em;
  bottom: -0.24em;
  z-index: 0;
  font: 800 min(22vw, 260px) / 0.75 var(--font);
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

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

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font: var(--text-small);
  color: var(--text-2);
}

.hero__proof b {
  color: #fff;
  font-weight: 700;
}

@media (min-width: 560px) {
  .hero__actions {
    grid-auto-flow: column;
    align-items: center;
    justify-items: start;
    justify-content: start;
  }

  .hero__actions .btn {
    width: auto;
  }
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .hero--wide-visual .hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: calc(var(--nav-height) + 72px) clamp(64px, 6vw, 104px);
  }
}

/* Cabecera de página interior sin captura (sobre nosotros, legales, demo). */
.page-head {
  position: relative;
  padding-block: calc(var(--nav-height) + 40px) clamp(32px, 4vw, 56px);
}

.page-head h1 {
  margin-block: 16px 20px;
}

.page-head .breadcrumb {
  margin-bottom: 8px;
}

.page-head--deep .breadcrumb a:hover {
  color: #fff;
}

/* --- Franja de logos ---------------------------------------------------------
   Los escudos vienen en gris; sobre blanco se quedan como están.            */

.logos {
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
}

.logos__title {
  text-align: center;
  margin-bottom: 20px;
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  width: max-content;
  animation: marquee 70s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__track img {
  height: 56px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity var(--dur-base) var(--ease-out);
}

.marquee__track img:hover {
  opacity: 1;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- Bloque de funcionalidad: captura + texto ---------------------------------
   Es el layout de las páginas de módulo. Se alterna el lado con .split--flip. */

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

.feature__text .overline {
  margin-bottom: 14px;
}

.feature__text h2 {
  margin-bottom: 14px;
}

.feature__text h3 {
  font: var(--text-h4);
  color: var(--text-2);
  margin-bottom: 16px;
}

.feature__text .lead {
  font: var(--text-body);
}

.feature__text .checks {
  margin-top: 22px;
}

.feature__text .btn-row {
  margin-top: 26px;
}

.feature__visual {
  min-width: 0;
}

/* En móvil la captura va antes que el texto: se ve lo que se está contando. */
@media (max-width: 899px) {
  .feature .split > .feature__visual {
    order: -1;
  }
}

/* Rejilla de capturas de teléfono (jugadores, familias). */
.phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  align-items: end;
}

.phones .shot {
  border-radius: 18px;
}

.phones .shot:nth-child(2) {
  transform: translateY(-14px);
}

/* Dos capturas de portátil superpuestas. */
.laptops {
  position: relative;
  display: grid;
  gap: 16px;
}

/* --- Pestañas por rol -------------------------------------------------------- */

.roles__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 32px;
  scrollbar-width: none;
}

.roles__tabs::-webkit-scrollbar {
  display: none;
}

.roles__tabs .chip {
  flex: none;
  cursor: pointer;
}

.role-panel {
  display: grid;
  gap: 32px;
  align-items: center;
}

.role-panel[hidden] {
  display: none;
}

.role-panel__text h3 {
  font: var(--text-h2);
  letter-spacing: var(--ls-heading);
  max-width: 18ch;
}

.role-panel__text .lead {
  margin-top: 16px;
}

.role-panel__text .link-action {
  margin-top: 22px;
}

@media (min-width: 900px) {
  .role-panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
  }
}

/* --- Testimonios --------------------------------------------------------------- */

.quotes-carousel {
  display: grid;
  gap: 18px;
}

/* La pista: tarjetas de ancho fijo con snap, desbordando hasta el borde de la
   pantalla en móvil. La barra de scroll no se pinta: hay flechas y puntos. */
.quotes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 380px);
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-block: 4px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.quotes::-webkit-scrollbar {
  display: none;
}

.quotes:focus-visible {
  outline: none;
  box-shadow: none;
}

.quotes:focus-visible .quote {
  border-color: var(--blue);
}

.quote {
  display: grid;
  gap: 18px;
  align-content: space-between;
  padding: clamp(22px, 3vw, 30px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  min-width: 0;
}

.quote p {
  font: 500 17px/1.5 var(--font);
  color: var(--heading);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.quote p::before {
  content: '“';
  display: block;
  font: 800 48px/0.6 var(--font);
  color: var(--red);
  margin-bottom: 10px;
}

.quote footer {
  display: grid;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.quote footer b {
  font: 600 14px/1.3 var(--font);
  color: var(--heading);
}

.quote footer span {
  font: var(--text-caption);
  color: var(--text-3);
}

/* Flechas y puntos (los pinta el JS; sin JS sólo queda el scroll). */
.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.quotes__dots {
  display: flex;
  gap: 6px;
}

.quotes__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.quotes__dots span.is-active {
  background: var(--red);
  transform: scale(1.25);
}

.quotes__nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.quotes__btn {
  width: var(--control-md);
  height: var(--control-md);
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--heading);
  font: 600 18px/1 var(--font);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.quotes__btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.quotes__btn:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--border-strong);
  color: var(--heading);
}

.no-js .quotes__controls {
  display: none;
}

@media (min-width: 700px) {
  .quotes {
    grid-auto-columns: min(46%, 420px);
  }
}

@media (min-width: 1024px) {
  .quotes {
    grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3);
  }
}

/* --- Banda de CTA -------------------------------------------------------------- */

.cta-band {
  display: grid;
  gap: 24px;
  align-items: center;
}

.cta-band h2 {
  max-width: 20ch;
}

.cta-band .lead {
  margin-top: 12px;
}

.cta-band__actions {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.cta-band__actions .btn {
  width: 100%;
}

@media (min-width: 560px) {
  .cta-band__actions {
    justify-items: start;
  }

  .cta-band__actions .btn {
    width: auto;
  }
}

@media (min-width: 900px) {
  .cta-band {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .cta-band__actions {
    justify-items: end;
  }
}

/* --- Planes ----------------------------------------------------------------- */

.plan {
  display: grid;
  gap: 24px;
}

.plan__card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--blue);
}

.plan__card--accent {
  border-top-color: var(--red);
}

.plan__card h3 {
  font: var(--text-h3);
}

.plan__card p {
  font: var(--text-body);
  color: var(--text-2);
}

.plan__combos {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.plan__combos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: 500 15px/1.3 var(--font);
  color: var(--heading);
}

.plan__combos li b {
  margin-left: auto;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--success);
}

@media (min-width: 900px) {
  .plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Community --------------------------------------------------------------- */

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.community-grid .shot {
  aspect-ratio: 1;
}

.community-grid .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-grid .shot:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* Con cuatro fotos, mosaico 2 × 2 sin foto grande. */
.community-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-grid:has(> :nth-child(4):last-child) .shot:first-child {
  grid-column: auto;
  grid-row: auto;
}

/* --- Recursos descargables ------------------------------------------------------ */

.resources {
  display: grid;
  gap: var(--grid-gap);
}

.resource {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.resource:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.resource img {
  width: 100%;
  aspect-ratio: 1000 / 707;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}

.resource__body {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: var(--card-pad);
}

.resource__body h3 {
  font: var(--text-h4);
}

.resource__body p {
  font: var(--text-small);
  color: var(--text-2);
}

.resource__body .btn {
  justify-self: start;
  margin-top: 6px;
}

@media (min-width: 640px) {
  .resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Eventos / coaches invitados -------------------------------------------------- */

.events {
  display: grid;
  gap: var(--grid-gap);
}

.event {
  display: grid;
  gap: 12px;
  align-content: start;
}

.event .shot {
  aspect-ratio: 4 / 5;
}

.event .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event h3 {
  font: var(--text-h4);
}

.event p {
  font: var(--text-small);
  color: var(--text-2);
}

@media (min-width: 700px) {
  .events {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Ecosistema CLOOB × BOOWL ---------------------------------------------------- */

.eco {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.eco__side {
  background: var(--card);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: 12px;
  align-content: start;
}

.eco__side--boowl {
  background: var(--navy);
  color: #fff;
  --heading: #ffffff;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.76);
  --text-3: #c9d5e6;
  --border: rgba(255, 255, 255, 0.16);
}

.eco__side--boowl .link-action {
  color: #fff;
}

.eco__name {
  font: 800 clamp(28px, 5vw, 44px) / 1 var(--font);
  letter-spacing: -0.04em;
  color: var(--heading);
}

.eco__side > p:not(.overline):not(.eco__name) {
  font: var(--text-body);
  color: var(--text-2);
  max-width: 40ch;
}

@media (min-width: 900px) {
  .eco {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Página de perfil de jugador (landing) ------------------------------------------ */

.pitch {
  text-align: center;
}

.pitch h2 {
  font: var(--text-display);
  letter-spacing: var(--ls-display);
  max-width: 14ch;
  margin-inline: auto;
}

.pitch .lead {
  margin: 20px auto 0;
}

.polaroids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
  margin-top: clamp(32px, 5vw, 56px);
}

.polaroids img {
  width: 100%;
  height: auto;
}

.price {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: clamp(28px, 5vw, 48px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 34rem;
  margin-inline: auto;
}

.price .stat-xl {
  font-size: clamp(44px, 8vw, 88px);
}

.price ul {
  display: grid;
  gap: 8px;
  font: var(--text-body);
  color: var(--text-2);
}

/* --- Demo --------------------------------------------------------------------------- */

.demo__grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.demo__form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
}

.demo__iframe {
  display: block;
  width: 100%;
  height: 820px;
  border: 0;
}

.demo__alt {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.contact-list {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.contact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--card);
  font: 500 15px/1.4 var(--font);
  color: var(--heading);
}

@media (min-width: 900px) {
  .demo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: 64px;
  }
}

/* --- Landings de recursos (Practice Plan, jugadas, pack Canva) ------------------
   Cabecera deep con el formulario de Brevo embebido (misma rejilla que la demo),
   páginas del PDF a modo de galería y el mosaico de plantillas.               */

.resource-hero .checks {
  margin-top: 24px;
}

.resource-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.resource-hero__form {
  display: grid;
  gap: 0;
}

.resource-hero__form-head {
  padding: 18px 22px 12px;
  display: grid;
  gap: 4px;
}

.resource-hero__form-head b {
  font: 600 16px/1.3 var(--font);
  color: var(--navy);
}

.resource-hero__form-head span {
  font: var(--text-small);
  color: #463f5c;
}

.resource-hero__iframe {
  height: 880px;
}

/* Páginas del PDF en galería: proporción A4, sombra suave, pie de foto. */
.pages {
  display: grid;
  gap: var(--grid-gap);
}

.pages figure {
  display: grid;
  gap: 10px;
}

.pages img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1273;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.pages figcaption {
  font: var(--text-caption);
  color: var(--text-3);
}

@media (min-width: 600px) {
  .pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .pages {
    grid-template-columns: repeat(var(--pages-cols, 3), minmax(0, 1fr));
  }
}

/* Mosaico de plantillas 4:5. */
.templates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.templates img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

@media (min-width: 600px) {
  .templates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .templates {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
}

/* Portada del recurso junto al texto. */
.resource-cover {
  width: min(100%, 420px);
  margin-inline: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

/* --- Sobre nosotros ------------------------------------------------------------------ */

.manifesto {
  display: grid;
  gap: 16px;
  font: 500 clamp(19px, 2.4vw, 26px) / 1.4 var(--font);
  letter-spacing: -0.01em;
  color: var(--heading);
  max-width: 30ch;
}

.manifesto b {
  color: var(--accent-text);
  font-weight: 700;
}

.photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--tall {
  aspect-ratio: 4 / 5;
}

.photo--wide {
  aspect-ratio: 3 / 2;
}

/* --- Legal / prosa ------------------------------------------------------------------- */

.prose {
  font: var(--text-body);
  color: var(--text-2);
}

.prose > * + * {
  margin-top: 18px;
}

.prose h2 {
  font: var(--text-h3);
  color: var(--heading);
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.prose h3 {
  font: var(--text-h4);
  color: var(--heading);
  margin-top: 28px;
}

.prose strong {
  color: var(--heading);
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.prose ul li {
  list-style: none;
  position: relative;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 0.65em;
  width: 8px;
  height: 2px;
  background: var(--blue);
}

.prose ol {
  list-style: decimal;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-small);
}

.prose th,
.prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--navy);
  color: #fff;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 32px;
}

.prose img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* --- Página no encontrada ----------------------------------------------------------- */

.notfound {
  min-height: 70vh;
  display: grid;
  align-content: center;
  text-align: center;
  justify-items: center;
}

.notfound .stat-xl {
  color: var(--red-bright);
}

/* --- Landing de evento ------------------------------------------------- */

.event-hero__when {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-weight: 600;
}

.event-hero__poster img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.event-body img {
  border-radius: 12px;
}

.event-details {
  margin-top: 48px;
  padding: 26px 28px;
  background: var(--surface, #f7f8fb);
  border-radius: 12px;
}

.event-details h2 {
  margin: 0 0 16px;
  font-size: 1.25rem;
}

.event-details dl {
  margin: 0;
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.event-details dt {
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.event-details dd {
  margin: 2px 0 0;
  font-weight: 600;
}

/* ===== 57-app-ui.css ===== */
/* --- Maquetas de la app --------------------------------------------------------
   Reproducen la interfaz real de CLOOB (app.cloobfootball.com): barra navy
   #1B2A5E, fondo gris #F4F6FA, tarjetas blancas de radio 12, chips de estado,
   tiles de color y el marcador. Son piezas de producto: van con aria-hidden y
   una alternativa en texto, y ahí sí hay colores que el resto de la web no usa.
   Viven sobre el deep del hero, con sombra oscura.                              */

:root {
  --ui-navy: #1b2a5e;
  --ui-blue: #0d5cab;
  --ui-bg: #f4f6fa;
  --ui-card: #ffffff;
  --ui-border: #e3e8f2;
  --ui-text: #0f1a3a;
  --ui-text-2: #5b6785;
  --ui-green: #22a35a;
  --ui-green-bg: #e6f6ec;
  --ui-red: #d3202f;
  --ui-red-bg: #fde8ea;
  --ui-amber: #f2a51a;
  --ui-amber-bg: #fdf3dd;
  --ui-purple: #6d3df0;
  --ui-purple-bg: #efe9fd;
}

/* Ventana de escritorio (portátil) */
.ui-window {
  container: uiwin / inline-size;
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ui-bg);
  color: var(--ui-text);
  font: 500 12px/1.3 var(--font);
  letter-spacing: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-rows: auto 1fr;
}

.ui-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--ui-navy);
  color: #fff;
  font: 700 13px/1 var(--font);
}

.ui-topbar__logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.ui-topbar__logo img {
  width: 18px;
  height: 18px;
}

.ui-topbar__spacer {
  flex: 1;
}

.ui-topbar__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ui-blue);
  flex: none;
}

.ui-topbar__dot--green {
  background: var(--ui-green);
}

.ui-topbar__pill {
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--ui-purple);
  font: 600 10px/22px var(--font);
}

.ui-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.ui-layout > * {
  min-width: 0;
}

.ui-side {
  display: none;
}

@container uiwin (min-width: 640px) {
  .ui-layout {
    grid-template-columns: 148px minmax(0, 1fr);
  }

  .ui-side {
    display: grid;
  }
}

.ui-side {
  background: #fff;
  border-right: 1px solid var(--ui-border);
  padding: 10px 8px;
  gap: 2px;
  align-content: start;
}

.ui-side span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font: 500 10.5px/1 var(--font);
  color: var(--ui-text-2);
}

.ui-side span::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--ui-border);
  flex: none;
}

.ui-side span.is-active {
  background: var(--ui-navy);
  color: #fff;
  font-weight: 600;
}

.ui-side span.is-active::before {
  background: rgba(255, 255, 255, 0.35);
}

.ui-main {
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.ui-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--ui-navy);
  color: #fff;
  font: 600 9.5px/1 var(--font);
  justify-self: start;
}

.ui-crumb b {
  opacity: 0.7;
  font-weight: 500;
}

.ui-title {
  font: 700 13px/1.2 var(--font);
  color: var(--ui-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-title .ui-tag {
  margin-left: auto;
}

.ui-card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ui-card--flush {
  padding: 0;
  overflow: hidden;
}

.ui-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ui-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ui-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@container uiwin (max-width: 520px) {
  .ui-grid-4,
  .ui-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tres tiles a dos columnas: el último ocupa la fila entera. */
  .ui-grid-3 > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  .ui-balance {
    grid-template-columns: 1fr;
  }

  .ui-row {
    grid-template-columns: 22px minmax(0, 1.5fr) auto auto;
  }

  .ui-row > :nth-child(3) {
    display: none;
  }
}

/* Etiquetas y chips como en la app */
.ui-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  font: 700 8.5px/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ui-blue);
  white-space: nowrap;
}

.ui-tag--green { background: var(--ui-green); }
.ui-tag--red { background: var(--ui-red); }
.ui-tag--amber { background: var(--ui-amber); }
.ui-tag--purple { background: var(--ui-purple); }
.ui-tag--soft { background: var(--ui-purple-bg); color: var(--ui-purple); }
.ui-tag--navy { background: var(--ui-navy); }

/* Tile de dato (el de contabilidad, estadísticas) */
.ui-tile {
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 4px;
  background: var(--ui-bg);
  min-width: 0;
}

.ui-tile--amber { background: var(--ui-amber-bg); }
.ui-tile--red { background: var(--ui-red-bg); }
.ui-tile--green { background: var(--ui-green-bg); }
.ui-tile--purple { background: var(--ui-purple-bg); }

.ui-tile__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ui-amber);
}

.ui-tile--red .ui-tile__icon { background: var(--ui-red); }
.ui-tile--green .ui-tile__icon { background: var(--ui-green); }
.ui-tile--purple .ui-tile__icon { background: var(--ui-purple); }
.ui-tile--navy .ui-tile__icon { background: var(--ui-navy); }

.ui-tile__label {
  font: 500 9.5px/1.2 var(--font);
  color: var(--ui-text);
  margin-top: 4px;
}

.ui-tile__value {
  font: 800 18px/1 var(--font);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ui-amber);
}

.ui-tile--red .ui-tile__value { color: var(--ui-red); }
.ui-tile--green .ui-tile__value { color: var(--ui-green); }
.ui-tile--purple .ui-tile__value { color: var(--ui-purple); }
.ui-tile--navy .ui-tile__value { color: var(--ui-navy); }

.ui-tile__sub {
  font: 500 8.5px/1.2 var(--font);
  color: var(--ui-text-2);
}

/* Banda azul de balance (contabilidad) */
.ui-balance {
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(120deg, #0f3d80, #1b6fd0);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ui-balance__label {
  font: 700 8.5px/1 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ui-balance__value {
  font: 800 30px/1 var(--font);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.ui-balance__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font: 600 9px/1.2 var(--font);
  white-space: nowrap;
}

.ui-balance__row b {
  display: block;
  font: 700 11px/1.2 var(--font);
}

.ui-balance__box {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  font: 700 8.5px/1.2 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-balance__box b {
  display: block;
  font: 800 16px/1.1 var(--font);
  letter-spacing: -0.02em;
  text-transform: none;
  margin-top: 3px;
}

/* Fila de tabla (jugadores, pagos) */
.ui-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.5fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--ui-border);
  font: 500 10px/1.2 var(--font);
}

.ui-row--head {
  border-top: 0;
  background: var(--ui-bg);
  font: 700 8.5px/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-text-2);
}

.ui-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ui-navy);
  color: #fff;
  font: 700 9px/22px var(--font);
  text-align: center;
}

.ui-row b {
  font-weight: 600;
  color: var(--ui-text);
}

.ui-row small {
  color: var(--ui-text-2);
  font-size: 9px;
}

.ui-num {
  font: 700 10px/1 var(--font);
  color: var(--ui-navy);
  font-variant-numeric: tabular-nums;
}

.ui-actions {
  display: flex;
  gap: 4px;
}

.ui-actions i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ui-green);
}

.ui-actions i:last-child {
  background: var(--ui-navy);
}

/* Marcador de partido (como la tarjeta de la app) */
.ui-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.ui-score__team {
  display: grid;
  justify-items: center;
  gap: 5px;
  font: 700 8.5px/1.1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.ui-crest {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ui-navy);
  color: #fff;
  font: 800 14px/34px var(--font);
  text-align: center;
}

.ui-score__nums {
  display: flex;
  gap: 2px;
  background: var(--ui-green);
  border-radius: 8px;
  color: #fff;
  font: 800 16px/1 var(--font);
  padding: 6px 8px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ui-score__nums--pending {
  background: #f0883e;
}

.ui-score__nums span {
  min-width: 22px;
  text-align: center;
}

.ui-score__nums em {
  font: 600 8px/16px var(--font);
  opacity: 0.8;
}

/* Barra de progreso y listas */
.ui-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--ui-border);
  overflow: hidden;
}

.ui-bar i {
  display: block;
  height: 100%;
  width: var(--v, 50%);
  background: var(--ui-blue);
  border-radius: inherit;
}

.ui-bar--green i { background: var(--ui-green); }
.ui-bar--amber i { background: var(--ui-amber); }

.ui-list {
  display: grid;
  gap: 6px;
}

.ui-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10px/1.2 var(--font);
  color: var(--ui-text);
}

.ui-list li::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--ui-green);
  flex: none;
}

.ui-list li.is-pending::before {
  background: var(--ui-amber);
}

/* Calendario mensual compacto */
.ui-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.ui-cal span {
  aspect-ratio: 1.15;
  border-radius: 6px;
  background: var(--ui-bg);
  font: 600 8px/1 var(--font);
  color: var(--ui-text-2);
  padding: 4px;
  position: relative;
}

.ui-cal span i {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--ui-red);
}

.ui-cal span i.is-blue { background: var(--ui-blue); }
.ui-cal span i.is-amber { background: var(--ui-amber); }
.ui-cal span.is-today { outline: 2px solid var(--ui-navy); color: var(--ui-navy); }

/* Campo de football (playbook) */
.ui-field {
  position: relative;
  aspect-ratio: 5 / 3;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--ui-border);
  background-image: repeating-linear-gradient(0deg, transparent 0 18px, #eef1f7 18px 19px);
  overflow: hidden;
}

.ui-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ui-field circle {
  fill: #fff;
  stroke: var(--ui-text);
  stroke-width: 1.5;
}

.ui-field text {
  font: 700 7px var(--font);
  fill: var(--ui-text);
  text-anchor: middle;
}

.ui-field path {
  fill: none;
  stroke: var(--ui-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-field path.is-red { stroke: var(--ui-red); }
.ui-field path.is-blue { stroke: var(--ui-blue); }

/* Install (tarjeta de semana) */
.ui-install {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: #fff;
}

.ui-install__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 700 11px/1.2 var(--font);
}

.ui-install__meta {
  font: 500 9px/1.3 var(--font);
  color: var(--ui-text-2);
}

.ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ui-chips span {
  height: 16px;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--ui-bg);
  font: 600 8px/16px var(--font);
  color: var(--ui-text-2);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-chips span.is-green { background: var(--ui-green-bg); color: var(--ui-green); }
.ui-chips span.is-red { background: var(--ui-red-bg); color: var(--ui-red); }
.ui-chips span.is-amber { background: var(--ui-amber-bg); color: #9a6a05; }

/* Parrilla del planificador */
.ui-plan {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.ui-plan__hours {
  background: var(--ui-navy);
  color: #fff;
  font: 600 8px/1 var(--font);
  display: grid;
  grid-auto-rows: 22px;
  align-items: center;
  padding-left: 6px;
}

.ui-plan__col {
  display: grid;
  grid-auto-rows: 22px;
  padding: 0 6px;
  background-image: repeating-linear-gradient(0deg, transparent 0 21px, var(--ui-border) 21px 22px);
}

.ui-block {
  grid-row: span var(--rows, 2);
  margin: 2px 0;
  border-radius: 6px;
  padding: 4px 8px;
  font: 600 8.5px/1.2 var(--font);
  background: #fde9d6;
  border-left: 3px solid #f0883e;
  color: var(--ui-text);
  display: grid;
  align-content: start;
  gap: 2px;
}

.ui-block small {
  font: 500 7.5px/1 var(--font);
  color: var(--ui-text-2);
}

.ui-block--drill {
  background: #e4edf9;
  border-left-color: var(--ui-blue);
}

.ui-block--rest {
  background: var(--ui-bg);
  border-left-color: #b6bfd0;
}

.ui-block--playbook {
  background: var(--ui-purple-bg);
  border-left-color: var(--ui-purple);
}

/* Chat del asistente */
.ui-chat {
  display: grid;
  gap: 8px;
}

.ui-msg {
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 12px;
  font: 500 10px/1.4 var(--font);
  background: #fff;
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

.ui-msg--me {
  justify-self: end;
  background: var(--ui-purple);
  color: #fff;
  border: 0;
  border-bottom-right-radius: 3px;
}

.ui-msg b {
  font-weight: 700;
}

/* Teléfono (vista de jugador) */
/* El teléfono vive en 58-app-mobile.css: reproduce la app móvil real. */

/* Hero: montaje ventana + teléfono */
.ui-stage {
  position: relative;
  min-width: 0;
  container: uistage / inline-size;
  padding-bottom: 10%;
}

.ui-stage .ui-window {
  width: 100%;
}

@container uistage (min-width: 480px) {
  .ui-stage .ui-window {
    width: 86%;
  }
}

.ui-stage .ui-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36%;
  display: none;
}

@container uistage (min-width: 480px) {
  .ui-stage .ui-phone {
    display: block;
  }
}

/* En móvil la maqueta no se miniaturiza: si el hero tiene teléfono, se enseña
   la app móvil a tamaño real (es lo que el visitante tiene en la mano); si no,
   la ventana se pinta a tamaño real, recortada en alto y fundida por abajo. */
@media (max-width: 639px) {
  .ui-stage {
    padding-bottom: 0;
  }

  .ui-stage .ui-window {
    max-height: 440px;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ui-stage:has(.ui-phone) .ui-window {
    display: none;
  }

  .ui-stage .ui-phone {
    display: block;
    position: static;
    width: min(100%, 320px);
    margin-inline: auto;
  }
}

/* Animación del hero: la fila que "entra" y el dato que cambia */
.ui-live {
  transition: background-color var(--dur-base) var(--ease-out);
}

.ui-live.is-updating,
.is-updating {
  animation: ui-pop var(--dur-slow) var(--ease-snap);
}

@keyframes ui-pop {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

/* ===== 58-app-mobile.css ===== */
/* --- Maqueta de la app móvil ---------------------------------------------------
   Reproduce la app real de CLOOB en el teléfono, pantalla a pantalla: la barra
   navy con la marca roja y los botones (IA, chat, control de staff, avatar), la
   subcabecera blanca con el título y su color de sección, el cuerpo y la barra
   de pestañas flotante. Todo se mide en "puntos" (--pt) relativos al ancho del
   teléfono, así la maqueta es idéntica a 180 px en el hero y a 320 px en móvil.
   1em dentro de la pantalla = 10 pt de la app (diseñada a 360 pt de ancho).   */

:root {
  --m-navy: #1b1f3b;
  --m-ink: #0d2f5e;
  --m-ink-2: #1e3a6e;
  --m-text: #1f2937;
  --m-text-2: #5c6478;
  --m-text-3: #8a93a6;
  --m-border: #e6e9f0;
  --m-bg: #f6f7fa;
  --m-orange: #f47b20;
  --m-orange-bg: #fdecdc;
  --m-green: #2e9e4f;
  --m-green-bg: #e6f5ea;
  --m-blue: #1e88e5;
  --m-blue-bg: #e3f1fc;
  --m-purple: #8b2cf5;
  --m-purple-bg: #efe4fd;
  --m-pink: #e64b8b;
  --m-red: #d62e3a;
  --m-red-bg: #fbe5e7;
  --m-amber: #e9a21a;
  --m-amber-bg: #fdf3dd;
  --m-cyan: #1fb6d9;
}

.ui-phone {
  container-type: inline-size;
  width: min(100%, 320px);
  margin-inline: auto;
  position: relative;
  aspect-ratio: 360 / 760;
}

/* El marco y la isla de la cámara van en pseudoelementos: sus cqw se miden
   contra el propio .ui-phone (los del elemento se medirían contra el ancestro). */
.ui-phone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13cqw;
  background: #101426;
  box-shadow: var(--phone-shadow, 0 30px 60px rgba(0, 0, 0, 0.45)), inset 0 0 0 0.6cqw rgba(255, 255, 255, 0.12);
}

.ui-phone::after {
  content: '';
  position: absolute;
  top: 5cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 26cqw;
  height: 6.5cqw;
  border-radius: 4cqw;
  background: #101426;
  z-index: 3;
}

.ui-phone__screen {
  --pt: calc(100cqw / 360);
  position: absolute;
  inset: 2.4cqw;
  border-radius: 11cqw;
  overflow: hidden;
  background: #fff;
  color: var(--m-text);
  font: 500 calc(var(--pt) * 10) / 1.3 var(--font);
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
}

.ui-phone__screen b,
.ui-phone__screen strong {
  font-weight: 700;
}

/* --- Iconos: máscaras SVG en un solo color ------------------------------------ */
.m-i {
  display: inline-block;
  width: 2em;
  height: 2em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.m-i--home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5V21h-6v-6h-6v6H3z'/%3E%3C/svg%3E"); }
.m-i--cone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3h5l3.2 14H6.3zM4 18h16v3H4z'/%3E%3C/svg%3E"); }
.m-i--cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v16H3zM3 10h18' stroke='%23000' stroke-width='2' fill='none'/%3E%3Cpath d='M7 2h2v5H7zM15 2h2v5h-2zM9 13h6v5H9z'/%3E%3C/svg%3E"); }
.m-i--helmet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 16 0v3h-3l-1 4h-3l-.6-3H8.5L8 19H5.5z'/%3E%3C/svg%3E"); }
.m-i--menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-i--left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 15l7-7 7 7' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--sparkles { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3l1.9 5.6L17.5 10.5l-5.6 1.9L10 18l-1.9-5.6L2.5 10.5l5.6-1.9zM18.5 14l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E"); }
.m-i--chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c5 0 9 3.4 9 7.5S17 18 12 18c-.8 0-1.6-.1-2.3-.3L5 20l1-3.3C4.1 15.3 3 13 3 10.5 3 6.4 7 3 12 3z'/%3E%3C/svg%3E"); }
.m-i--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E"); }
.m-i--xo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l6 6M10 4l-6 6M13 17l6-6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='17' cy='6' r='3.2'/%3E%3Ccircle cx='7' cy='17' r='3.2'/%3E%3Ccircle cx='17' cy='17' r='3.2' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); }
.m-i--ball { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.5 3.5c-5-1.5-14.5 3-17 12-.5 1.8 0 4 0 4s2.2.5 4 0c9-2.5 13.5-12 13-16zM8.7 16.7l-1.4-1.4 8-8 1.4 1.4z'/%3E%3C/svg%3E"); }
.m-i--whistle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 9h8l4-2v4l-4 1a6 6 0 1 1-8-3z'/%3E%3Cpath d='M15 4l1 3M12 3l.5 3.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-i--pie { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3v10h10A10 10 0 1 1 11 3z'/%3E%3Cpath d='M13 2a9 9 0 0 1 9 9h-9z'/%3E%3C/svg%3E"); }
.m-i--pencil { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.5V21h3.5L17 10.5 13.5 7zM15 5.5 18.5 9l2-2a1.4 1.4 0 0 0 0-2L19 3.5a1.4 1.4 0 0 0-2 0z'/%3E%3C/svg%3E"); }
.m-i--mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M3 6l9 7 9-7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); }
.m-i--search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3Cpath d='M15 15l6 6' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-i--card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5h20v14H2zM2 8v3h20V8zM5 14h5v2H5z'/%3E%3C/svg%3E"); }
.m-i--cart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h3l2.5 11h11L21 6H6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='19' r='1.8'/%3E%3Ccircle cx='17' cy='19' r='1.8'/%3E%3C/svg%3E"); }
.m-i--bubbles { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h13v9H7l-4 3v-3H2z'/%3E%3Cpath d='M17 8h5v9h-1v3l-4-3h-6v-3h6z'/%3E%3C/svg%3E"); }
.m-i--doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2h9l5 5v15H5zM8 11h8v2H8zM8 15h8v2H8z'/%3E%3C/svg%3E"); }
.m-i--coins { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 10c0 1.7 3.6 3 8 3s8-1.3 8-3v4c0 1.7-3.6 3-8 3s-8-1.3-8-3zM4 16c0 1.7 3.6 3 8 3s8-1.3 8-3v3c0 1.7-3.6 3-8 3s-8-1.3-8-3z'/%3E%3C/svg%3E"); }
.m-i--alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 23 21H1zM11 9h2v6h-2zM11 16.5h2V19h-2z'/%3E%3C/svg%3E"); }
.m-i--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--checkbox { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M7 12.5l3.5 3.5L17 9' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--trend { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M9 6h9v9' stroke='%23000' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--trend-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 18 6 6M15 18H6V9' stroke='%23000' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-i--bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4l-2 4h16l-2-4V8a6 6 0 0 0-6-6zM9.5 19a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E"); }
.m-i--star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5.2 4.9 1.4 7L12 17.8 5.8 21.3l1.4-7L2 9.4l7-.9z'/%3E%3C/svg%3E"); }
.m-i--grid { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7.5' cy='7.5' r='4'/%3E%3Ccircle cx='16.5' cy='7.5' r='4'/%3E%3Ccircle cx='7.5' cy='16.5' r='4'/%3E%3Ccircle cx='16.5' cy='16.5' r='4'/%3E%3C/svg%3E"); }
.m-i--dumbbell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h2v4H2zM5 8h3v8H5zM16 8h3v8h-3zM20 10h2v4h-2zM8 11h8v2H8z'/%3E%3C/svg%3E"); }
.m-i--play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E"); }
.m-i--photo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 5h13v14H3zM5 16l3.5-4 2.5 3 2-2 2.5 3z'/%3E%3Cpath d='M19 3v3h3v2h-3v3h-2V8h-3V6h3V3z'/%3E%3C/svg%3E"); }
.m-i--shirt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3l4 2 4-2 5 4-2.5 3.5L17 9v12H7V9l-1.5 1.5L3 7z'/%3E%3C/svg%3E"); }
.m-i--sync { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6M20 12a8 8 0 0 1-13.7 5.6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 2v5h-5M6 22v-5h5'/%3E%3C/svg%3E"); }
.m-i--hourglass { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14v2l-6 8 6 8v2H5v-2l6-8-6-8z'/%3E%3C/svg%3E"); }
.m-i--expand { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-i--share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4l7 6-7 6v-4c-5 0-8 1.5-11 6 1-6 4-10 11-10.5z'/%3E%3C/svg%3E"); }
.m-i--heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E"); }
.m-i--folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h7l2 2h11v13H2z'/%3E%3C/svg%3E"); }
.m-i--history { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 16 0v3h-3l-1 4h-3l-.6-3H8.5L8 19H5.5z'/%3E%3C/svg%3E"); }

/* --- Barra de estado + cabecera navy ------------------------------------------- */
.m-status {
  height: 4.4em;
  padding: 1.3em 2.8em 0;
  background: var(--m-navy);
  color: #fff;
  font: 700 1.5em/1 var(--font);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-status i {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-style: normal;
}

.m-status i::before {
  content: '';
  width: 2.2em;
  height: 0.9em;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 20'%3E%3Crect x='0' y='12' width='4' height='8' rx='1'/%3E%3Crect x='6' y='8' width='4' height='12' rx='1'/%3E%3Crect x='12' y='4' width='4' height='16' rx='1'/%3E%3Crect x='18' y='0' width='4' height='20' rx='1' opacity='.4'/%3E%3Cpath d='M28 8a12 12 0 0 1 18 0l-2.5 2.5a8.5 8.5 0 0 0-13 0zM32 12.5a7 7 0 0 1 10 0l-2.5 2.5a3.5 3.5 0 0 0-5 0zM37 17.5l-2-2a2.5 2.5 0 0 1 4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 20'%3E%3Crect x='0' y='12' width='4' height='8' rx='1'/%3E%3Crect x='6' y='8' width='4' height='12' rx='1'/%3E%3Crect x='12' y='4' width='4' height='16' rx='1'/%3E%3Crect x='18' y='0' width='4' height='20' rx='1' opacity='.4'/%3E%3Cpath d='M28 8a12 12 0 0 1 18 0l-2.5 2.5a8.5 8.5 0 0 0-13 0zM32 12.5a7 7 0 0 1 10 0l-2.5 2.5a3.5 3.5 0 0 0-5 0zM37 17.5l-2-2a2.5 2.5 0 0 1 4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.m-status i::after {
  content: attr(data-bat);
  height: 1em;
  padding: 0 0.3em;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.85);
  color: var(--m-navy);
  font-size: 0.72em;
  line-height: 1.4;
  font-weight: 700;
}

.m-appbar {
  height: 6.6em;
  padding: 0 1.8em 1.2em 2.2em;
  background: var(--m-navy);
  display: flex;
  align-items: center;
  gap: 1em;
}

.m-appbar__mark {
  width: 2.9em;
  height: 3.7em !important; /* pisa el img { height: auto } global */
  object-fit: contain;
  margin-right: auto;
}

.m-ib {
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.9em;
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  flex: none;
}

.m-ib .m-i {
  width: 2em;
  height: 2em;
}

.m-ib--purple { background: var(--m-purple); }
.m-ib--green { background: #1db954; }
.m-ib--blue { background: #0a84d6; }

.m-ib[data-dot]::after {
  content: '';
  position: absolute;
  top: -0.25em;
  right: -0.25em;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--m-red);
  border: 0.2em solid var(--m-navy);
}

.m-avatar {
  width: 4.4em;
  height: 4.4em;
  border-radius: 50%;
  background: #2f5f9e;
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
  overflow: visible;
}

.m-avatar .m-i {
  width: 2.6em;
  height: 2.6em;
}

.m-avatar::after {
  content: '';
  position: absolute;
  right: -0.3em;
  bottom: -0.2em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #0a84d6 var(--i-down) center / 60% no-repeat;
  --i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 0.2em solid var(--m-navy);
}

.m-avatar[data-n]::before {
  content: attr(data-n);
  position: absolute;
  top: -0.4em;
  right: -0.5em;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.4em;
  border-radius: 1em;
  background: var(--m-red);
  color: #fff;
  font: 700 1em/1.7 var(--font);
  text-align: center;
  z-index: 1;
}

/* Marcador de puntos y medallas del jugador (cabecera de la app del jugador). */
.m-points {
  height: 3.6em;
  padding: 0 1.4em;
  margin-right: auto;
  border-radius: 1.8em;
  background: #2a2f4d;
  color: #fff;
  font: 700 1.5em/1 var(--font);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: none;
}

.m-points .m-i {
  width: 1.2em;
  height: 1.2em;
  color: #b95a2b;
}

.m-points em {
  font-style: normal;
  font-size: 0.8em;
  color: #9aa0bd;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 0.6em;
}

.m-points em::before,
.m-points em::after {
  content: '';
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: #d4a017;
  box-shadow: inset 0 0 0 0.25em rgba(0, 0, 0, 0.35);
}

.m-points em::after {
  background: #9aa0bd;
}

/* --- Subcabecera blanca con el color de la sección ----------------------------- */
.m-sub {
  --c: var(--m-ink);
  height: 5.4em;
  padding: 0 1.8em;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 0.35em solid var(--c);
  background: #fff;
  color: var(--m-ink);
  font: 700 1.5em/1 var(--font);
}

.m-sub--orange { --c: var(--m-orange); }
.m-sub--green { --c: var(--m-green); }
.m-sub--purple { --c: var(--m-purple); }
.m-sub--pink { --c: var(--m-pink); }
.m-sub--blue { --c: var(--m-blue); }

.m-sub__back {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  justify-self: start;
}

.m-sub__back .m-i {
  width: 1.4em;
  height: 1.4em;
}

.m-sub__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.1em;
}

.m-sub__title .m-i {
  width: 1.15em;
  height: 1.15em;
  color: var(--c);
}

/* --- Cuerpo ------------------------------------------------------------------- */
.m-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 1.6em 1.6em 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2em;
  background: #fff;
}

.m-body > * {
  flex: none;
  min-width: 0;
}

.m-post > *,
.m-card > *,
.m-match > * {
  min-width: 0;
}

.m-body--gray {
  background: var(--m-bg);
}

.m-h1 {
  font: 800 2.3em/1.15 var(--font);
  color: var(--m-ink);
  letter-spacing: -0.01em;
}

.m-h2 {
  font: 700 1.55em/1.2 var(--font);
  color: var(--m-ink);
}

.m-h3 {
  font: 700 1.45em/1.2 var(--font);
  color: var(--m-ink);
}

.m-eyebrow {
  font: 700 1.05em/1.2 var(--font);
  color: var(--m-text-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.m-eyebrow small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.15em;
  margin-left: 0.5em;
}

.m-p {
  font: 500 1.35em/1.35 var(--font);
  color: var(--m-text-2);
}

.m-p b {
  color: var(--m-text);
}

.m-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.m-card {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 1.5em;
  padding: 1.5em;
  display: grid;
  gap: 1em;
  min-width: 0;
}

.m-card--soft {
  background: var(--m-bg);
  border-color: transparent;
}

.m-card--accent {
  border-left: 0.5em solid var(--c, var(--m-ink));
}

.m-card--accent.is-red { --c: var(--m-red); }
.m-card--accent.is-orange { --c: var(--m-orange); }
.m-card--accent.is-blue { --c: var(--m-blue); }

/* Pastillas y etiquetas */
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 2.6em;
  padding: 0 1.2em;
  border-radius: 1.3em;
  background: var(--m-ink);
  color: #fff;
  font: 700 1.25em/1 var(--font);
  white-space: nowrap;
  flex: none;
}

.m-pill--green { background: #23a94a; }
.m-pill--amber { background: var(--m-amber); }
.m-pill--blue { background: var(--m-blue); }
.m-pill--red { background: var(--m-red); }
.m-pill--orange { background: var(--m-orange); }
.m-pill--soft { background: #eef0f5; color: var(--m-ink); }
.m-pill--light { background: rgba(255, 255, 255, 0.16); color: #fff; }

.m-tag {
  display: inline-flex;
  align-items: center;
  height: 2.1em;
  padding: 0 0.8em;
  border-radius: 0.5em;
  background: var(--m-blue-bg);
  color: var(--m-ink);
  font: 700 1em/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-tag--orange { background: var(--m-orange-bg); color: #b4560f; }
.m-tag--green { background: var(--m-green-bg); color: var(--m-green); }
.m-tag--red { background: var(--m-red-bg); color: var(--m-red); }
.m-tag--amber { background: var(--m-amber-bg); color: #a56f0a; }
.m-tag--purple { background: var(--m-purple-bg); color: var(--m-purple); }
.m-tag--gray { background: #eef0f5; color: var(--m-text-2); }
.m-tag--teal { background: #d9f5ea; color: #157a53; }

.m-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 2.8em;
  padding: 0 1.1em;
  border-radius: 1.4em;
  border: 1px solid var(--m-border);
  background: #fff;
  color: var(--m-ink);
  font: 600 1.25em/1 var(--font);
  white-space: nowrap;
}

.m-chip--soft {
  border-color: transparent;
  background: #eef0f5;
  color: var(--m-text);
}

.m-chip--blue {
  border-color: transparent;
  background: var(--m-blue);
  color: #fff;
}

.m-chip--navy {
  border-color: transparent;
  background: var(--m-ink);
  color: #fff;
}

.m-chip--dot::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--m-green);
}

.m-chip small {
  font-weight: 500;
  color: var(--m-text-2);
}

.m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
}

/* Botones */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 3.2em;
  padding: 0 1.4em;
  border-radius: 1.6em;
  background: var(--m-ink);
  color: #fff;
  font: 700 1.3em/1 var(--font);
  white-space: nowrap;
  min-width: 0;
}

.m-btn .m-i {
  width: 1.1em;
  height: 1.1em;
}

.m-btn--orange { background: var(--m-orange); }
.m-btn--green { background: var(--m-green); }
.m-btn--blue { background: var(--m-blue); }
.m-btn--red { background: var(--m-red); }
.m-btn--navy { background: var(--m-ink); border-radius: 0.8em; }
.m-btn--outline { background: #fff; color: var(--m-ink); border: 1px solid #c9d0dd; }
.m-btn--disabled { background: #e8ebf1; color: #a4acbd; }
.m-btn--block { width: 100%; border-radius: 0.8em; }
.m-btn--sm { height: 2.7em; padding: 0 1.1em; font-size: 1.15em; }

.m-btn-row {
  display: flex;
  gap: 0.8em;
  flex-wrap: wrap;
}

.m-btn-row--center {
  justify-content: center;
}

/* KPI: etiqueta, número grande, pie */
.m-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}

.m-kpi {
  border: 1px solid var(--m-border);
  border-radius: 1.2em;
  padding: 1.3em 1.4em;
  display: grid;
  gap: 0.35em;
  min-width: 0;
}

.m-kpi__label {
  font: 700 1em/1.2 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-text-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-kpi__label .m-i {
  width: 1.4em;
  height: 1.4em;
  color: var(--m-ink);
}

.m-kpi__value {
  font: 800 2.4em/1.1 var(--font);
  color: var(--m-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.m-kpi__value small {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--m-text-2);
  margin-left: 0.2em;
}

.m-kpi__value.is-blue { color: var(--m-blue); }
.m-kpi__value.is-purple { color: var(--m-purple); }
.m-kpi__value.is-green { color: var(--m-green); }

.m-kpi__sub {
  font: 500 1.2em/1.3 var(--font);
  color: var(--m-text-2);
}

.m-kpi--flat {
  border: 0;
  border-top: 1px solid var(--m-border);
  border-radius: 0;
  padding-inline: 1em;
}

/* Tiles de color de la contabilidad */
.m-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1em;
}

.m-tiles--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m-tile {
  --c: var(--m-blue);
  --bg: var(--m-blue-bg);
  border-radius: 1.4em;
  padding: 1.3em 1.2em;
  background: var(--bg);
  display: grid;
  gap: 0.6em;
  align-content: start;
  min-width: 0;
}

.m-tile--green { --c: var(--m-green); --bg: var(--m-green-bg); }
.m-tile--orange { --c: var(--m-orange); --bg: var(--m-orange-bg); }
.m-tile--navy { --c: var(--m-ink); --bg: #f0f3f8; }
.m-tile--red { --c: var(--m-red); --bg: var(--m-red-bg); }
.m-tile--amber { --c: var(--m-amber); --bg: var(--m-amber-bg); }

.m-tile__icon {
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 0.6em;
}

.m-tile__icon .m-i {
  width: 1.5em;
  height: 1.5em;
}

.m-tile__label {
  font: 500 1.3em/1.25 var(--font);
  color: var(--m-text);
}

.m-tile__value {
  font: 800 1.6em/1.1 var(--font);
  color: var(--c);
  font-variant-numeric: tabular-nums;
}

.m-tile__sub {
  font: 500 1.05em/1.3 var(--font);
  color: var(--m-text-2);
}

/* Fila de lista: texto a la izquierda, estado a la derecha */
.m-rows {
  display: grid;
  gap: 0.8em;
}

.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 4em;
  padding: 0.8em 1.3em;
  border: 1px solid var(--c, var(--m-border));
  border-radius: 1.2em;
  font: 500 1.4em/1.2 var(--font);
  color: var(--m-text);
}

.m-row--orange { --c: #f7c9a1; }

.m-row em {
  font-style: normal;
  font-weight: 600;
  color: var(--m-orange);
  white-space: nowrap;
}

.m-row em.is-green { color: var(--m-green); }

/* Selectores y buscador */
.m-selects {
  display: flex;
  gap: 0.8em;
}

.m-select {
  flex: 1;
  min-width: 0;
  height: 3.6em;
  padding: 0 1.2em;
  border: 1px solid #c9d0dd;
  border-radius: 0.9em;
  background: #fff;
  color: var(--m-ink);
  font: 600 1.35em/1 var(--font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  white-space: nowrap;
}

.m-select > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-select .m-i {
  width: 1em;
  height: 1em;
  color: var(--m-ink);
}

.m-select--fit {
  flex: none;
}

.m-select--small {
  height: 3.2em;
  font-size: 1.25em;
  border-radius: 0.8em;
}

.m-search {
  height: 4em;
  padding: 0 1.4em;
  border: 1px solid var(--m-border);
  border-radius: 2em;
  background: #fff;
  color: var(--m-text-3);
  font: 500 1.45em/1 var(--font);
  display: flex;
  align-items: center;
  gap: 0.6em;
  box-shadow: 0 2px 8px rgba(13, 47, 94, 0.06);
}

.m-search .m-i {
  width: 1.2em;
  height: 1.2em;
  color: var(--m-blue);
}

/* Pestañas con subrayado rojo */
.m-tabs {
  display: flex;
  gap: 2em;
  border-bottom: 1px solid var(--m-border);
  overflow: hidden;
  white-space: nowrap;
  padding-inline: 0.3em;
}

.m-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0 1em;
  font: 700 1.35em/1 var(--font);
  color: var(--m-text-2);
  border-bottom: 0.3em solid transparent;
  margin-bottom: -1px;
  flex: none;
}

.m-tabs span .m-i {
  width: 1.15em;
  height: 1.15em;
}

.m-tabs span.is-active {
  color: var(--m-ink);
  border-color: #ee3b4a;
}

/* Segmentado (Agenda / Parrilla) */
.m-seg {
  display: flex;
  gap: 0.8em;
}

.m-seg span {
  height: 3.6em;
  padding: 0 1.6em;
  border-radius: 1em;
  border: 1px solid #c9d0dd;
  color: var(--m-ink);
  font: 700 1.35em/1 var(--font);
  display: inline-flex;
  align-items: center;
}

.m-seg span.is-active {
  background: var(--m-ink);
  border-color: var(--m-ink);
  color: #fff;
}

/* Barra de progreso */
.m-progress {
  height: 0.7em;
  border-radius: 0.35em;
  background: #e6e9f0;
  overflow: hidden;
}

.m-progress i {
  display: block;
  height: 100%;
  width: var(--v, 50%);
  background: var(--m-green);
  border-radius: inherit;
}

.m-block {
  border-left: 0.35em solid var(--m-ink);
  padding-left: 1.4em;
  display: grid;
  gap: 0.5em;
}

/* Timeline del entrenamiento */
.m-timeline {
  display: grid;
  gap: 1em;
}

.m-slot {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  gap: 1em;
}

.m-slot__time {
  font: 800 1.45em/1.2 var(--font);
  color: var(--m-ink);
  padding-top: 0.6em;
}

.m-slot__card {
  border: 1px solid var(--m-border);
  border-radius: 1.2em;
  padding: 1.1em 1.3em;
  display: grid;
  gap: 0.5em;
}

.m-slot__card .m-between b {
  font: 700 1.45em/1.2 var(--font);
  color: var(--m-ink);
}

.m-slot__card .m-tags {
  margin-top: 0.4em;
}

/* Tarjeta "Mi semana" del inicio */
.m-week {
  border-radius: 1.8em;
  padding: 1.6em;
  background: linear-gradient(135deg, #0a1a44 0%, #0b2f6e 55%, #0d4fa8 100%);
  color: #fff;
  display: grid;
  gap: 1.2em;
}

.m-week__head b {
  display: block;
  font: 800 2.1em/1.1 var(--font);
}

.m-week__head span {
  display: block;
  font: 500 1.3em/1.3 var(--font);
  opacity: 0.85;
  margin-top: 0.2em;
}

.m-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5em;
}

.m-day {
  border-radius: 0.9em;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.9em 0 0.8em;
  display: grid;
  justify-items: center;
  gap: 0.3em;
  font: 800 1.5em/1 var(--font);
  position: relative;
}

.m-day small {
  font: 700 0.62em/1 var(--font);
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.m-day i {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  font: 700 0.6em/1.9 var(--font);
  text-align: center;
  font-style: normal;
  margin-top: 0.2em;
}

.m-day.is-active {
  background: #fff;
  color: var(--m-ink);
}

.m-day.is-active i {
  background: var(--m-ink);
  color: #fff;
}

.m-day.has-dot::after {
  content: '';
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #2ee38b;
}

.m-week__event {
  border-radius: 1.2em;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.2em;
  display: grid;
  gap: 0.9em;
}

.m-week__event .m-eyebrow {
  color: #fff;
  font-size: 1.15em;
}

.m-week__event > div {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: rgba(255, 255, 255, 0.12);
  font: 800 1.35em/1 var(--font);
  letter-spacing: 0.04em;
}

.m-week__event .m-i {
  width: 2.2em;
  height: 2.2em;
  padding: 0.5em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.2);
  -webkit-mask-size: 55%;
  mask-size: 55%;
}

/* Tarjeta de acción (Requiere tu acción) */
.m-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2em;
  padding: 1.3em 1.4em;
  border: 1px solid var(--m-border);
  border-left: 0.5em solid var(--c);
  border-radius: 1.4em;
}

.m-action--red { --c: var(--m-red); --bg: var(--m-red-bg); }
.m-action--orange { --c: var(--m-orange); --bg: var(--m-orange-bg); }
.m-action--blue { --c: var(--m-blue); --bg: var(--m-blue-bg); }
.m-action--green { --c: var(--m-green); --bg: var(--m-green-bg); }

.m-action__icon {
  width: 4em;
  height: 4em;
  border-radius: 1em;
  background: var(--bg);
  color: var(--c);
  display: grid;
  place-items: center;
}

.m-action__icon .m-i {
  width: 2em;
  height: 2em;
}

.m-action b {
  display: block;
  font: 700 1.5em/1.2 var(--font);
  color: var(--m-ink);
}

.m-action span {
  display: block;
  font: 500 1.3em/1.3 var(--font);
  color: var(--m-text-2);
}

.m-action > .m-i {
  width: 1.3em;
  height: 1.3em;
  color: var(--m-text-2);
}

/* Barra de resumen (cobro del mes) */
.m-summary {
  border: 1px solid var(--m-border);
  border-radius: 1.4em;
  padding: 1.4em;
  display: grid;
  gap: 0.9em;
}

.m-summary .m-between b {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: 700 1.45em/1 var(--font);
  color: var(--m-ink);
}

.m-summary .m-between b .m-i {
  color: var(--m-green);
  width: 1.2em;
  height: 1.2em;
}

.m-summary .m-between em {
  font: 800 1.9em/1 var(--font);
  color: var(--m-green);
  font-style: normal;
}

/* Alerta de deuda (pagos del jugador) */
.m-alert {
  border-radius: 1.2em;
  padding: 1.4em 1.6em;
  background: var(--m-red-bg);
  color: var(--m-red);
  display: grid;
  gap: 0.3em;
}

.m-alert .m-eyebrow {
  color: var(--m-red);
}

.m-alert b {
  font: 800 2.4em/1.1 var(--font);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.m-alert span {
  font: 500 1.3em/1.3 var(--font);
  color: var(--m-text-2);
}

/* Fila de pago del jugador */
.m-pay {
  display: grid;
  gap: 0.6em;
  padding: 1.2em 0 1.3em 1.4em;
  border-left: 0.5em solid var(--m-amber);
  border-bottom: 1px solid var(--m-border);
}

.m-pay.is-paid {
  border-left-color: var(--m-green);
}

.m-pay__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.m-pay__head b {
  font: 600 1.5em/1.2 var(--font);
  color: var(--m-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.m-pay__date {
  font: 500 1.35em/1.2 var(--font);
  color: var(--m-text);
}

.m-pay__meta {
  font: 500 1.3em/1.2 var(--font);
  color: var(--m-blue);
  display: flex;
  gap: 0.6em;
  align-items: center;
}

.m-pay__meta em {
  font-style: normal;
  color: var(--m-amber);
}

.m-pay__meta em.is-green {
  color: var(--m-green);
}

.m-pay__meta i {
  width: 1px;
  height: 1.1em;
  background: var(--m-ink);
}

.m-pay .m-btn-row {
  justify-content: flex-end;
  margin-top: 0.4em;
}

/* Tarjeta de jugada del playbook */
.m-play {
  border: 1px solid var(--m-border);
  border-radius: 1.5em;
  padding: 1.3em;
  display: grid;
  gap: 1em;
}

.m-play__top {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: 1.2em;
  align-items: start;
}

.m-play__thumb {
  border: 1px solid var(--m-border);
  border-radius: 1em;
  aspect-ratio: 1.55;
  background: #fff;
  overflow: hidden;
}

.m-play__thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.m-play__thumb .yl {
  stroke: #d8dce6;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.m-play__thumb .r {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m-play__thumb .p {
  fill: #fff;
  stroke-width: 1.4;
}

.m-play__name {
  font: 800 1.5em/1.2 var(--font);
  color: var(--m-ink);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  align-items: start;
}

.m-play__badge {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--m-purple);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.m-play__badge .m-i {
  width: 1.3em;
  height: 1.3em;
}

.m-play__label {
  margin-top: 0.7em;
  font: 700 1.05em/1.2 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-text-2);
}

.m-play__formation {
  font: 500 1.4em/1.2 var(--font);
  color: var(--m-ink);
  text-transform: uppercase;
  margin-top: 0.2em;
}

.m-play__foot {
  border-top: 1px dashed var(--m-border);
  padding-top: 1em;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1em;
}

.m-play__foot .m-chips {
  gap: 0.5em;
}

.m-play__foot .m-chip {
  height: 2.4em;
  font-size: 1.1em;
}

/* Gráfico circular sencillo (estadísticas, tipos de jugada) */
.m-pie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6em;
  align-items: center;
}

.m-pie__disc {
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: conic-gradient(var(--m-blue) 0 56%, var(--m-red) 56% 84%, var(--m-orange) 84% 100%);
}

.m-pie__legend {
  display: grid;
  gap: 0.9em;
  font: 500 1.35em/1.2 var(--font);
  color: var(--m-text-2);
}

.m-pie__legend span {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.m-pie__legend span::before {
  content: '';
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}

.m-pie__legend b {
  color: var(--m-ink);
}

/* Post de comunicación */
.m-post {
  border: 1px solid var(--m-border);
  border-left: 0.5em solid var(--m-ink);
  border-radius: 1.5em;
  padding: 1.4em;
  display: grid;
  gap: 1em;
}

.m-post__head {
  display: flex;
  align-items: center;
  gap: 1em;
}

.m-post__avatar {
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: var(--m-ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.m-post__avatar .m-i {
  width: 2.2em;
  height: 2.2em;
}

.m-post__who {
  flex: 1;
  min-width: 0;
}

.m-post__who b {
  display: block;
  font: 700 1.5em/1.2 var(--font);
  color: var(--m-ink);
}

.m-post__who span {
  display: block;
  font: 500 1.3em/1.2 var(--font);
  color: var(--m-text-2);
}

.m-post__bell {
  width: 3.6em;
  height: 3.6em;
  border-radius: 1em;
  border: 1px solid var(--m-border);
  color: var(--m-ink);
  display: grid;
  place-items: center;
}

.m-post__bell .m-i {
  width: 1.6em;
  height: 1.6em;
}

.m-post__title {
  font: 700 1.55em/1.2 var(--font);
  color: var(--m-ink);
}

.m-post__video {
  border-radius: 1.2em;
  aspect-ratio: 16 / 9;
  background: linear-gradient(115deg, #7a1d2c 0%, #b32b3a 40%, #163a6b 41%, #0c2149 100%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.m-post__video::before {
  content: '';
  width: 5em;
  height: 3.6em;
  border-radius: 0.9em;
  background: #ff0033;
}

.m-post__video .m-i {
  position: absolute;
  color: #fff;
  width: 1.8em;
  height: 1.8em;
}

.m-post__reacts {
  display: flex;
  gap: 0.7em;
}

.m-post__reacts span {
  width: 5em;
  height: 4em;
  border-radius: 0.9em;
  background: var(--m-bg);
  display: grid;
  place-items: center;
  font-size: 1.5em;
}

.m-post__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 700 1.35em/1 var(--font);
  color: var(--m-blue);
}

.m-post__foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.m-post__foot .m-i {
  width: 1.6em;
  height: 1.6em;
  padding: 0.35em;
  border-radius: 50%;
  background: var(--m-blue);
  -webkit-mask-size: 60%;
  mask-size: 60%;
}

/* Perfil del jugador (edición) */
.m-profile {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 1.4em;
  align-items: start;
}

.m-profile__photo {
  width: 9em;
  height: 9em;
  border-radius: 50%;
  background: #2f5f9e;
  color: #fff;
  display: grid;
  place-items: center;
}

.m-profile__photo .m-i {
  width: 5em;
  height: 5em;
}

.m-profile__name {
  font: 800 2.1em/1.1 var(--font);
  color: #1b1a3d;
  display: flex;
  gap: 0.5em;
  align-items: baseline;
}

.m-profile__name small {
  font-size: 0.65em;
  color: var(--m-ink);
}

.m-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em 1.5em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--m-border);
}

.m-fields div {
  min-width: 0;
}

.m-fields span {
  display: block;
  font: 500 1.2em/1.2 var(--font);
  color: var(--m-text-2);
}

.m-fields b {
  display: block;
  font: 500 1.4em/1.3 var(--font);
  color: #1b1a3d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 1em 0.6em 1em 1.2em;
  border-bottom: 1px solid var(--m-border);
}

.m-doc > div {
  display: grid;
  gap: 0.6em;
  justify-items: start;
}

.m-doc b {
  font: 500 1.5em/1.2 var(--font);
  color: var(--m-text);
}

.m-doc .m-i {
  width: 1.4em;
  height: 1.4em;
  color: var(--m-ink);
}

/* Explorar: rejilla de áreas */
.m-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em;
}

.m-area {
  background: #fff;
  border-radius: 1.2em;
  padding: 1.2em 1em 1.1em;
  display: grid;
  gap: 1em;
  position: relative;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(13, 47, 94, 0.05);
}

.m-area__icon {
  width: 3.6em;
  height: 3.6em;
  border-radius: 0.9em;
  background: #e8ecf3;
  color: var(--m-ink);
  display: grid;
  place-items: center;
}

.m-area__icon .m-i {
  width: 1.8em;
  height: 1.8em;
}

.m-area--fav .m-area__icon {
  background: var(--m-green-bg);
  color: #1f9a3e;
}

.m-area > span {
  font: 500 1.2em/1.25 var(--font);
  color: var(--m-text);
}

.m-area > .m-i {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 1.3em;
  height: 1.3em;
  color: #d8dce6;
}

.m-area--fav > .m-i {
  color: #f5a623;
}

/* Marcador de partido en el móvil */
.m-match {
  border: 1px solid var(--m-border);
  border-radius: 1.5em;
  padding: 1.3em;
  display: grid;
  gap: 1.1em;
}

.m-match__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8em;
  text-align: center;
}

.m-match__team {
  display: grid;
  justify-items: center;
  gap: 0.5em;
  font: 700 1em/1.2 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-ink);
}

.m-match__crest {
  width: 4.6em;
  height: 4.6em;
  border-radius: 50%;
  background: var(--m-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 800 2em/1 var(--font);
}

.m-match__score {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 3.2em;
  padding: 0 1em;
  border-radius: 0.8em;
  background: var(--m-green);
  color: #fff;
  font: 800 1.9em/1 var(--font);
  font-variant-numeric: tabular-nums;
}

.m-match__score.is-pending {
  background: var(--m-orange);
}

.m-match__score em {
  font: 700 0.55em/1 var(--font);
  font-style: normal;
  opacity: 0.85;
}

.m-match__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
}

.m-match__foot small {
  font: 500 1.15em/1.2 var(--font);
  color: var(--m-text-2);
  font-style: italic;
}

/* Rutina: ejercicio con imagen */
.m-exercise {
  display: grid;
  gap: 1em;
}

.m-exercise__head {
  display: flex;
  align-items: center;
  gap: 1em;
}

.m-exercise__num {
  width: 4.4em;
  height: 4.4em;
  border-radius: 50%;
  background: var(--m-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 800 2em/1 var(--font);
}

.m-exercise__head b {
  font: 700 1.6em/1.2 var(--font);
  color: var(--m-text);
}

.m-exercise__img {
  border: 1px solid var(--m-border);
  border-radius: 1.2em;
  aspect-ratio: 1.6;
  background: #fafafa;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: end;
  padding: 1.5em 2em 0;
  overflow: hidden;
}

/* Silueta esquemática del ejercicio: dos figuras, la de la derecha con los brazos arriba. */
.m-exercise__img i {
  width: 22%;
  height: 92%;
  background:
    radial-gradient(circle at 50% 8%, #d9d5cf 0 9%, transparent 10%),
    linear-gradient(#e46b4a, #e46b4a) 50% 24% / 34% 20% no-repeat,
    linear-gradient(#d9d5cf, #d9d5cf) 50% 62% / 30% 60% no-repeat,
    linear-gradient(#d9d5cf, #d9d5cf) 24% 40% / 10% 36% no-repeat,
    linear-gradient(#d9d5cf, #d9d5cf) 76% 40% / 10% 36% no-repeat;
  border-radius: 0.5em;
}

.m-exercise__img i:last-child {
  background:
    radial-gradient(circle at 50% 8%, #d9d5cf 0 9%, transparent 10%),
    linear-gradient(#e46b4a, #e46b4a) 50% 24% / 34% 20% no-repeat,
    linear-gradient(#d9d5cf, #d9d5cf) 50% 62% / 30% 60% no-repeat,
    linear-gradient(#d9d5cf, #d9d5cf) 8% 22% / 10% 36% no-repeat,
    linear-gradient(#d9d5cf, #d9d5cf) 92% 22% / 10% 36% no-repeat;
}

.m-exercise__img .m-i {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 2.6em;
  height: 2.6em;
  padding: 0.6em;
  border-radius: 50%;
  background: #8a93a6;
  color: #fff;
  -webkit-mask-size: 55%;
  mask-size: 55%;
}

.m-input {
  height: 5.2em;
  padding: 0 1.4em;
  border: 1px solid #c9d0dd;
  border-radius: 1em;
  background: #fff;
  color: var(--m-text-3);
  font: 500 1.45em/1 var(--font);
  display: flex;
  align-items: center;
}

/* Producto de la tienda */
.m-product {
  border: 1px solid var(--m-border);
  border-radius: 1.5em;
  overflow: hidden;
  display: grid;
}

.m-product__img {
  aspect-ratio: 1.5;
  background: linear-gradient(160deg, #f0f3f8, #dfe5ef);
  display: grid;
  place-items: center;
  color: var(--m-ink);
}

.m-product__img .m-i {
  width: 7em;
  height: 7em;
}

.m-product__body {
  padding: 1.3em;
  display: grid;
  gap: 0.8em;
}

.m-product__body .m-between b {
  font: 700 1.55em/1.2 var(--font);
  color: var(--m-ink);
}

.m-sizes {
  display: flex;
  gap: 0.6em;
}

.m-sizes span {
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.8em;
  border: 1px solid #c9d0dd;
  display: grid;
  place-items: center;
  font: 700 1.3em/1 var(--font);
  color: var(--m-ink);
}

.m-sizes span.is-active {
  background: var(--m-ink);
  border-color: var(--m-ink);
  color: #fff;
}

/* --- Barra de pestañas flotante ------------------------------------------------ */
.m-tabbar {
  position: absolute;
  left: 1.4em;
  right: 1.4em;
  bottom: 1.6em;
  height: 6.4em;
  padding: 0 1.2em;
  border-radius: 3.2em;
  background: #fff;
  box-shadow: 0 6px 24px rgba(13, 47, 94, 0.16), 0 0 0 1px rgba(13, 47, 94, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em;
  z-index: 2;
}

.m-tabbar span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #4b5563;
  height: 4.4em;
  padding: 0 0.7em;
  border-radius: 2.2em;
  font: 700 1.4em/1 var(--font);
  flex: none;
}

.m-tabbar span .m-i {
  width: 2.2em;
  height: 2.2em;
}

.m-tabbar span.is-active {
  background: var(--m-ink);
  color: #fff;
  padding: 0 1.2em;
}

.m-tabbar span.is-active.is-green {
  background: #23a94a;
}

.m-tabbar span[data-n] {
  position: relative;
}

.m-tabbar span[data-n]::after {
  content: attr(data-n);
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.35em;
  border-radius: 1em;
  background: var(--m-red);
  color: #fff;
  font: 700 0.85em/1.6 var(--font);
  text-align: center;
}

/* El cuerpo se funde antes de la barra, como una captura. */
.m-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
  pointer-events: none;
  z-index: 1;
}

.m-body--gray::after {
  background: linear-gradient(to bottom, rgba(246, 247, 250, 0), var(--m-bg) 70%);
}

.m-body--no-fade::after {
  display: none;
}

/* --- Galería de teléfonos (sección "la app del jugador") ------------------------ */
/* El envoltorio .shot recorta y pinta fondo para capturas; con el teléfono no. */
.shot:has(> .ui-phone) {
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.phones .ui-phone {
  width: 100%;
  --phone-shadow: 0 14px 32px rgba(13, 47, 94, 0.18);
}

.section--deep .phones .ui-phone,
.section--deep-2 .phones .ui-phone {
  --phone-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

@media (max-width: 639px) {
  .phones {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 20px;
    margin-inline: -4px;
    scrollbar-width: none;
  }

  .phones::-webkit-scrollbar {
    display: none;
  }

  .phones > * {
    flex: 0 0 min(72vw, 300px);
    scroll-snap-align: center;
  }

  .phones .shot:nth-child(2) {
    transform: none;
  }
}

/* ===== 60-blog.css ===== */
/* --- Blog: índice ------------------------------------------------------------- */

.post-grid {
  display: grid;
  gap: var(--grid-gap);
}

.post-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.post-card__link {
  display: grid;
  gap: 12px;
  height: 100%;
  align-content: start;
}

.post-card__link > :not(.post-card__img) {
  margin-inline: var(--card-pad);
}

.post-card__link > .post-card__meta {
  margin-top: var(--card-pad);
}

.post-card__link > .post-card__cta {
  margin-bottom: var(--card-pad);
}

.post-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.post-card__title {
  font: var(--text-h4);
  letter-spacing: -0.015em;
  color: var(--heading);
}

.post-card__excerpt {
  font: var(--text-small);
  color: var(--text-2);
}

.post-card__cta {
  margin-top: 4px;
  font: 600 14px/1 var(--font);
  color: var(--blue);
}

.post-card:hover .post-card__cta {
  color: var(--red-text);
}

@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Artículo ----------------------------------------------------------------
   Cabecera deep con chip + meta + titular + entradilla; debajo, una columna de
   820 px con el resumen, el índice en chips, la prosa (17/1.7), los bloques de
   CTA a mitad de lectura y el cierre deep. Mismo ritmo que el resto de la web:
   deep · blanco · deep.                                                      */

.article {
  --container-narrow: 868px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

.article__head {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 28px;
}

.article__meta .tag {
  height: 28px;
  padding: 0 12px;
  font: 700 10px/1 var(--font);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.article__meta-line {
  font: 600 11px/1.4 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.article__title {
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  margin-block: 22px 20px;
  color: #e9f3f9;
}

.article__lead {
  font: 400 17px/1.6 var(--font);
  max-width: 62ch;
}

.article__updated {
  margin-top: 16px;
  font: var(--text-caption);
  color: var(--text-3);
}

.article__hero {
  margin-top: -32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.article__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article__body {
  display: grid;
  gap: clamp(32px, 4vw, 44px);
  padding-top: clamp(32px, 4vw, 44px);
}

/* Resumen: la tarjeta blanca que abre la columna. */
.summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 14px;
}

.summary__label {
  font: 700 10px/1 var(--font);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--red-text);
}

.summary__list {
  display: grid;
  gap: 12px 28px;
}

.summary__list li {
  position: relative;
  padding-left: 22px;
  font: var(--text-body);
  color: var(--text);
}

.summary__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
}

.summary__text {
  font: var(--text-body);
  color: var(--text);
}

@media (min-width: 640px) {
  .summary__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Índice en chips. */
.toc {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: grid;
  gap: 12px;
}

.toc__title {
  font: 700 10px/1 var(--font);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
}

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

.toc__links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  font: 600 13px/1.2 var(--font);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.toc__links a:hover {
  color: var(--blue);
  border-color: var(--blue);
}

/* Prosa del artículo. */
.article__prose {
  font: 400 17px/1.7 var(--font);
  color: var(--text);
}

.article__prose > * + * {
  margin-top: 18px;
}

.article__prose > h2 {
  font: 700 clamp(24px, 3.4vw, 32px) / 1.2 var(--font);
  letter-spacing: -0.01em;
  color: var(--heading);
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 0;
  border-top: 0;
}

.article__prose > h2:first-child {
  margin-top: 0;
}

.article__prose h3 {
  font: 700 clamp(18px, 2.2vw, 22px) / 1.25 var(--font);
  color: var(--heading);
  margin-top: 32px;
}

.article__prose p {
  max-width: 70ch;
}

.article__prose ul,
.article__prose ol {
  gap: 10px;
}

.article__prose ul li::before {
  top: 0.75em;
}

.article__prose p:has(> img) {
  max-width: none;
}

.article__prose img {
  border-radius: var(--radius-lg);
  margin-block: 8px;
}

/* Los CTAs viven dentro de la prosa: que .prose a no les pise el estilo. */
.article__prose .post-cta a,
.article__prose .post-btn a {
  text-decoration: none;
}

.article__prose .post-btn {
  margin-top: 24px;
}

.article__prose .btn--primary,
.article__prose .btn--accent {
  color: #fff;
}

.article__prose .post-cta--demo .btn--outline,
.article__prose .post-cta--demo .overline + * {
  color: #fff;
}

.article__prose .post-cta--demo .btn--outline:hover {
  color: #fff;
}

.article__prose blockquote {
  background: var(--red-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  color: var(--text);
}

.article__prose blockquote p {
  font: 400 16px/1.65 var(--font);
}

.article__prose pre {
  overflow-x: auto;
  background: var(--deep);
  color: #e9f3f9;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  font-size: 13px;
  line-height: 1.75;
}

/* Glosario: `**Término** — definición` sale como lista con el filete rojo. */
.defs {
  display: grid;
  gap: 16px;
  margin-inline: 0;
  margin-bottom: 0;
}

.def {
  border-left: 3px solid var(--red);
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.def dt {
  font: 700 17px/1.3 var(--font);
  color: var(--heading);
}

.def dd {
  margin: 0;
  font: 400 16px/1.65 var(--font);
  color: var(--text-2);
}

/* FAQs en tarjeta. */
.faq-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.faq {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  display: grid;
  gap: 8px;
}

.article__prose .faq h3 {
  margin: 0;
  font: 700 17px/1.35 var(--font);
}

.article__prose .faq p {
  margin: 0;
  font: 400 16px/1.65 var(--font);
  color: var(--text-2);
}

/* CTAs a mitad de lectura. */
.post-cta {
  margin-block: clamp(36px, 5vw, 52px);
  border-radius: var(--radius-lg);
}

.post-cta__title {
  margin: 0;
  font: 700 clamp(20px, 2.6vw, 26px) / 1.2 var(--font);
  letter-spacing: -0.015em;
  color: var(--heading);
}

.post-cta p {
  margin: 0;
  font: 400 16px/1.65 var(--font);
  color: var(--text-2);
}

.post-cta .btn-row {
  margin-top: 6px;
  gap: 12px 20px;
}

/* Módulo: barra navy + cuerpo blanco. */
.post-cta--module {
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}

.post-cta__bar {
  background: var(--panel);
  color: #fff;
  padding: 14px 24px;
  text-align: center;
  font: 700 12px/1.3 var(--font);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.post-cta--resource .post-cta__bar {
  background: var(--red-hover);
}

.post-cta__body {
  padding: clamp(24px, 3.5vw, 32px) clamp(20px, 3vw, 28px);
  display: grid;
  gap: 16px;
}

.article__prose .post-cta .checks {
  padding-left: 0;
  gap: 10px;
}

.article__prose .post-cta .checks li {
  font: 400 15px/1.5 var(--font);
  padding-left: 28px;
}

.article__prose .post-cta .checks li::before {
  left: 0;
  top: 10px;
  width: 16px;
  height: 2px;
}

/* Conversión: bloque deep. */
.post-cta--demo {
  padding: clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 32px);
  display: grid;
  gap: 16px;
  justify-items: start;
}

.post-cta--demo .post-cta__title {
  font: 800 clamp(24px, 3.6vw, 34px) / 1.02 var(--font);
  letter-spacing: var(--ls-heading);
  max-width: 22ch;
}

.post-cta--demo .cta-note {
  color: var(--text-3);
}

/* Cierre del artículo. */
.article__cta {
  margin-top: clamp(16px, 3vw, 28px);
  padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
  border-radius: var(--radius-xl);
  display: grid;
  gap: 18px;
  justify-items: start;
}

.article__cta h2 {
  font: 800 clamp(28px, 4.4vw, 42px) / 0.98 var(--font);
  letter-spacing: var(--ls-display);
  max-width: 20ch;
  margin-top: 4px;
}

.article__cta p {
  font: var(--text-body);
  color: var(--text-2);
  max-width: 58ch;
}

.article__cta .btn-row {
  margin-top: 6px;
}

.article__back {
  margin-top: 8px;
  font: 600 14px/1 var(--font);
  color: var(--text-2);
}

.article__back:hover {
  color: #fff;
}

@media (min-width: 1080px) {
  .article__hero {
    margin-top: -48px;
  }
}

/* Vídeo embebido (YouTube) */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--deep);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== 70-motion.css ===== */
/*
 * Motion. Corto y seco; el único overshoot es revelar un dato. Nada flota,
 * nada respira, nada hace parallax. Con prefers-reduced-motion todo pasa a
 * 0 ms y la franja de logos se queda quieta.
 */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* El hero y la cabecera de página no se animan: el LCP (titular o captura)
   tiene que pintarse en el primer frame, no tras una transición. */
.hero [data-reveal],
.page-head [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Sin JS, todo visible. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }

  .marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}