/*
  Cabecera, pie y aviso de cookies: lo que aparece en todas las páginas.

  Cabecera y pie usan `.shell` para la caja y su propia clase para la fila, porque su layout flex
  no era del contenedor aunque en el diseño compartieran nombre de clase.
*/

/* ─────────────────────────────── Cabecera ───────────────────────────────
   Valores de la cabecera A ("clásica oscura") de `Web Academia.dc.html`. Es la única de las tres
   variantes que se implementa; el layout elegido se guarda por academia. */
/* Todo el texto que va sobre el primario sale de `--on-primary`, que el club configura. Era blanco
   fijo, y con un primario claro el blanco no se lee. */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--dark);
  color: var(--on-primary);
}

.bar__fila {
  padding-block: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--on-primary);
}

.brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: contain;
  background: var(--accent);
}

/* Sin logotipo subido, la cabecera cae a las iniciales del club sobre el color de acento. */
.brand__logo--iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--on-accent);
}

.brand__nombre {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bar__derecha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

/* El botón de acento se separa de los enlaces más que el resto de la fila: es una acción, no una
   entrada más del menú, y con los 8px del `gap` parecía la sexta. La medida es la del diseño
   actualizado, que lo despega con un margen propio; se encoge en pantallas estrechas, donde ese aire
   es justo lo que falta para que quepa todo. */
.bar__derecha .btn--cta {
  margin-left: clamp(12px, 2vw, 28px);
}

/* Sin menú hamburguesa: el diseño resuelve el desbordamiento con scroll horizontal. */
.nav {
  display: flex;
  gap: clamp(10px, 1.6vw, 22px);
  font-size: 14px;
  font-weight: 600;
  overflow-x: auto;
  padding-block: 4px;
}

.nav__link {
  color: var(--dark-fg);
  white-space: nowrap;
}

.nav__link--activo {
  color: var(--on-primary);
}

/* ─────────────────────────────── Pie ─────────────────────────────── */
.pie {
  background: var(--dark);
  color: #8f8c85;
  padding-block: clamp(26px, 4vw, 36px);
  font-size: 13px;
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

.pie__club {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
}

.pie__datos {
  margin: 0;
  line-height: 1.7;
}

.pie__datos a {
  color: inherit;
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
}

.marca__punto {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--accent);
}

.marca__nombre {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.pie__columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.columna {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* El diseño usa un div suelto como rótulo; aquí es un <h2> para que la estructura de encabezados
   del pie sea navegable, pero visualmente idéntico. */
.columna__titulo {
  color: var(--on-primary);
  font-weight: 600;
  font-size: 13px;
  margin: 0;
}

.columna a {
  color: inherit;
}

/* ─────────────────────────────── Aviso de cookies ───────────────────────────────
   Se llamaba `.aviso`, igual que la página de "sin web publicada", con definiciones
   incompatibles (banner fijo vs página centrada). Renombrado a `.cookies`. */
.cookies {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}

.cookies__texto {
  flex: 1 1 300px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cookies__enlace {
  font-weight: 600;
  text-decoration: underline;
  color: var(--ink);
}

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

/* ─────────────────────────── Marca: el logotipo o el nombre ───────────────────────────
   Lo elige el club en Ajustes de la web. El ancho es libre y solo se fija el alto: un logotipo
   apaisado y otro cuadrado tienen proporciones distintas, y forzar los dos a una caja cuadrada
   deformaba uno de los dos. */
.brand__logo--solo {
  width: auto;
  max-width: 220px;
  height: 34px;
  object-fit: contain;
  border-radius: 0;
  background: none;
}

.marca__logo {
  width: auto;
  max-width: 180px;
  height: 28px;
  object-fit: contain;
}

/* El tercer grupo del pie. Con él la fila tiene tres bloques y `space-between` deja los enlaces en
   el centro, que es donde los pone el diseño; con dos se iban al extremo. */
.pie__pago {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Los sellos de pago. Son marcas registradas, así que se dibujan con tipografía y color y no se
   sirven sus logotipos: ni los tenemos con licencia ni conviene traerlos de un CDN ajeno. */
.sello--paypal {
  color: #253b80;
  font-style: italic;
  letter-spacing: -0.01em;
}

.sello--paypal span:last-child {
  color: #179bd7;
}

.sello--visa {
  color: #1a1f71;
  font-style: italic;
  letter-spacing: 0.06em;
}

.sello--mc {
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  text-transform: uppercase;
}

/* Los dos círculos de Mastercard, superpuestos como en la marca. */
.sello__mc-circulos {
  width: 22px;
  height: 14px;
  flex: none;
  background:
    radial-gradient(circle 7px at 7px 7px, #eb001b 100%, transparent 0),
    radial-gradient(circle 7px at 15px 7px, #f79e1b 100%, transparent 0);
}

/* El acceso a la zona privada: botón con borde, no un enlace más de la lista. El texto lo pone la
   vista —"Acceder" o el nombre del socio—, aquí solo va la caja. */
.bar__acceso {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-primary);
  white-space: nowrap;
  padding: 10px 14px;
  border: 1px solid #35342f;
  border-radius: 6px;
}

.bar__acceso:hover {
  border-color: #6b6862;
}

.bar__acceso-icono {
  flex: none;
}