/*
 * Estilos del sitio informativo. Sistema de diseño de DESIGN.md y del panel: fuente del sistema,
 * fondo claro, texto casi negro y un solo acento azul profundo, con tema oscuro.
 * Sin recursos externos y sin estilos en línea (CSP del sitio: style-src 'self').
 * Contrastes sobre su fondo: texto 16:1, texto suave 7,4:1, acento 8,6:1; en tema oscuro, todos
 * por encima de 7:1. Unidades relativas para reflujo desde 320 px y ampliación al 200 %.
 */

:root {
  color-scheme: light dark;

  --color-fondo: #ffffff;
  --color-superficie: #f3f5f9;
  --color-superficie-2: #eceef2;
  --color-texto: #15171c;
  --color-texto-suave: #474d59;
  --color-borde: #8a909c;
  --color-borde-suave: #dce2eb;
  --color-acento: #204c91;
  --color-acento-hover: #12336f;
  --color-sobre-acento: #ffffff;
  --color-acento-suave: #edf2fa;
  --color-foco: #1a4594;
  --color-foco-anillo: #ffffff;
  --color-aviso: #6e4700;
  --color-aviso-fondo: #fff4d9;
  --color-exito: #1c5f34;
  --color-exito-fondo: #e7f4ec;
  --color-error: #a3221a;
  --color-error-fondo: #fdeceb;

  --fuente:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --fuente-mono:
    ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace;
  --texto-s: 0.9375rem;
  --texto-m: 1rem;
  --texto-l: 1.25rem;
  --texto-xl: 1.5rem;
  --texto-xxl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --interlineado: 1.6;
  --interlineado-titulo: 1.2;

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  --radio-m: 0.625rem;
  --radio-l: 1rem;
  --borde: 1px solid var(--color-borde-suave);
  --objetivo-tactil: 2.75rem; /* 44 px */
  --ancho-contenido: 72rem;
  --ancho-lectura: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #121418;
    --color-superficie: #1b1e24;
    --color-superficie-2: #252932;
    --color-texto: #eceef2;
    --color-texto-suave: #b9bfca;
    --color-borde: #868d9a;
    --color-borde-suave: #3a3f4a;
    --color-acento: #9dbcff;
    --color-acento-hover: #c3d6ff;
    --color-sobre-acento: #0d1526;
    --color-acento-suave: #1d2a45;
    --color-foco: #9dbcff;
    --color-foco-anillo: #121418;
    --color-aviso: #f5cd73;
    --color-aviso-fondo: #33270b;
    --color-exito: #8fdcaa;
    --color-exito-fondo: #12301e;
    --color-error: #ffaaa3;
    --color-error-fondo: #3a1714;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-texto-suave: var(--color-texto);
    --color-borde-suave: var(--color-borde);
  }
}

/* --- Base ---------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--texto-m);
  line-height: var(--interlineado);
  overflow-wrap: break-word;
  accent-color: var(--color-acento);
  caret-color: var(--color-acento);
  scrollbar-color: var(--color-borde) var(--color-superficie);
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: var(--interlineado-titulo);
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -0.025em;
}

h1 {
  font-size: var(--texto-xxl);
}
h2 {
  font-size: var(--texto-xl);
}
h3 {
  font-size: var(--texto-l);
}
h4 {
  font-size: var(--texto-m);
}

p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding-inline-start: var(--esp-5);
}

li + li {
  margin-block-start: var(--esp-2);
}

li > ul,
li > ol {
  margin-block-start: var(--esp-2);
}

ol > li::marker {
  font-weight: 700;
  color: var(--color-acento);
}

a {
  color: var(--color-acento);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--color-acento-hover);
  text-decoration-thickness: 0.14em;
}

strong {
  font-weight: 700;
}

code,
kbd {
  font-family: var(--fuente-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
code {
  padding: 0.05em 0.3em;
  border-radius: 0.25rem;
  background: var(--color-superficie-2);
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-block-start: var(--borde);
  margin-block: var(--esp-6);
}

/* Foco siempre visible: anillo doble que funciona sobre cualquier fondo. */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-foco-anillo);
}
main:focus {
  outline: none;
}

::selection {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* --- Estructura ---------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}
@media (min-width: 48rem) {
  .contenedor {
    padding-inline: var(--esp-5);
  }
}

.saltar {
  position: absolute;
  inset-inline-start: var(--esp-2);
  top: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-m);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-weight: 700;
  transform: translateY(-200%);
}
.saltar:focus,
.saltar:focus-visible {
  transform: none;
  color: var(--color-sobre-acento);
}

.cabecera {
  border-block-end: var(--borde);
  background: var(--color-fondo);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-3);
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: var(--color-texto);
  font-size: var(--texto-l);
  font-weight: 700;
  text-decoration: none;
}
.marca:hover {
  color: var(--color-acento);
}

.navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.navegacion li + li {
  margin-block-start: 0;
}
.navegacion a:not(.boton) {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding-inline: var(--esp-3);
  border-block-end: 0.1875rem solid transparent;
  color: var(--color-texto);
  font-weight: 600;
  text-decoration: none;
}
.navegacion a:not(.boton):hover {
  border-block-end-color: var(--color-borde);
  color: var(--color-acento);
}
.navegacion a[aria-current] {
  border-block-end-color: var(--color-acento);
  color: var(--color-acento);
}

main {
  flex: 1 0 auto;
  padding-block: var(--esp-5) var(--esp-7);
}

.contenido,
.pagina > article > :not(.contenido) {
  max-width: var(--ancho-lectura);
}

.pagina > article > * + * {
  margin-block-start: var(--esp-4);
}

.contenido > * + * {
  margin-block-start: var(--esp-4);
}
.contenido > h2 {
  margin-block-start: var(--esp-6);
  padding-block-start: var(--esp-4);
  border-block-start: var(--borde);
}
.contenido > h3 {
  margin-block-start: var(--esp-5);
}
.contenido > h2 + *,
.contenido > h3 + * {
  margin-block-start: var(--esp-3);
}
h2[id],
h3[id] {
  scroll-margin-block-start: var(--esp-5);
}

.entradilla {
  font-size: var(--texto-l);
  line-height: 1.5;
  color: var(--color-texto);
}

.meta {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

/* --- Migas e índice ------------------------------------------------------------------------ */

.migas {
  max-width: none;
  margin-block-end: var(--esp-4);
  font-size: var(--texto-s);
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.migas li {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  margin: 0;
}
.migas li + li::before {
  content: '/';
  margin-inline-end: var(--esp-2);
  color: var(--color-texto-suave);
}
.migas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
}
.migas [aria-current='page'] {
  color: var(--color-texto-suave);
}

.indice {
  padding: var(--esp-4);
  border: var(--borde);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}
.indice__titulo {
  margin-block-end: var(--esp-2);
  font-weight: 700;
}
.indice ol {
  margin: 0;
}
.indice a {
  display: inline-block;
  padding-block: 0.125rem;
}

/* --- Botones y acciones -------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-tactil);
  min-width: var(--objetivo-tactil);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.boton:hover {
  background: var(--color-superficie-2);
  color: var(--color-texto);
}
.boton--primario {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}
.boton--primario:hover {
  border-color: var(--color-acento-hover);
  background: var(--color-acento-hover);
  color: var(--color-sobre-acento);
}
.boton--compacto {
  padding-inline: var(--esp-3);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* --- Avisos, marcadores pendientes, citas -------------------------------------------------- */

.aviso {
  padding: var(--esp-3) var(--esp-4);
  border: var(--borde);
  border-inline-start: 0.375rem solid var(--color-acento);
  border-radius: var(--radio-m);
  background: var(--color-acento-suave);
}
.aviso > * + * {
  margin-block-start: var(--esp-2);
}
.aviso--importante {
  border-inline-start-color: var(--color-error);
  background: var(--color-error-fondo);
}
.aviso--atencion,
.aviso--borrador {
  border-inline-start-color: var(--color-aviso);
  background: var(--color-aviso-fondo);
}
.aviso--consejo {
  border-inline-start-color: var(--color-exito);
  background: var(--color-exito-fondo);
}

mark.pendiente {
  padding: 0.05em 0.3em;
  border: 1px dashed var(--color-aviso);
  border-radius: 0.25rem;
  background: var(--color-aviso-fondo);
  color: var(--color-texto);
  font-weight: 600;
}

blockquote:not(.aviso) {
  padding-inline-start: var(--esp-4);
  border-inline-start: 0.25rem solid var(--color-borde);
  color: var(--color-texto-suave);
}

/* --- Tablas y código ----------------------------------------------------------------------- */

.tabla-envoltura {
  overflow-x: auto;
  max-width: 100%;
  border: var(--borde);
  border-radius: var(--radio-m);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-s);
}
th,
td {
  padding: var(--esp-2) var(--esp-3);
  border-block-end: var(--borde);
  text-align: start;
  vertical-align: top;
}
th {
  border-block-end: 2px solid var(--color-borde);
  background: var(--color-superficie);
  font-weight: 700;
}
tbody tr:last-child td {
  border-block-end: 0;
}
td:first-child {
  min-width: 8rem;
}

pre.bloque {
  overflow-x: auto;
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border: var(--borde);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
}
pre.bloque code {
  padding: 0;
  background: transparent;
}

/* --- Tarjetas de las páginas índice -------------------------------------------------------- */

.tarjetas {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  list-style: none;
}
.tarjetas li + li {
  margin-block-start: 0;
}
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  height: 100%;
  padding: var(--esp-4);
  border: var(--borde);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  color: var(--color-texto);
  text-decoration: none;
}
.tarjeta:hover {
  border-color: var(--color-acento);
  color: var(--color-texto);
}
.tarjeta__titulo {
  color: var(--color-acento);
  font-size: var(--texto-l);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.tarjeta__texto {
  color: var(--color-texto-suave);
}
@media (min-width: 40rem) {
  .tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Inicio: presentación y recorrido ------------------------------------------------------ */

.pagina--inicio .contenido,
.pagina--inicio > article > :not(.contenido) {
  max-width: none;
}

/* La portada muestra la rutina como contenido: ejemplo estático, sin controles simulados. */
.inicio-producto {
  display: contents;
}
.pulsera-ilustracion {
  display: none;
}
.inicio-presentacion {
  display: grid;
  align-items: center;
  gap: 3rem;
  padding-block: clamp(1rem, 4vw, 3.5rem) 3rem;
}
.inicio-presentacion__texto {
  display: grid;
  gap: 1.75rem;
}
.inicio-presentacion h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 4.8vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.inicio-presentacion .entradilla {
  max-width: 49ch;
  font-size: 1.125rem;
}
.inicio-presentacion .acciones {
  gap: 0.75rem;
}
.inicio-presentacion .boton {
  min-height: 3.125rem;
  padding-inline: 1.25rem;
}
.inicio-presentacion__ayuda {
  max-width: 45ch;
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}
.muestra-rutina {
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  margin: 0;
  padding: 1.5rem;
  border: var(--borde);
  border-radius: 1.5rem;
  background: var(--color-superficie);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(16 33 63 / 0.2);
}
.muestra-rutina__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.muestra-rutina__onda {
  color: var(--color-acento);
  font-size: 0.875rem;
  letter-spacing: 0;
}
.muestra-rutina__dia {
  display: grid;
  gap: 0.25rem;
  padding-block: 1.25rem;
}
.muestra-rutina__dia span {
  color: var(--color-texto-suave);
  font-size: 0.875rem;
}
.muestra-rutina__ejercicios {
  margin: 0;
  padding: 0;
  list-style: none;
}
.muestra-rutina__ejercicios li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 1rem 0;
  border-top: var(--borde);
}
.muestra-rutina__ejercicios li > span {
  font-weight: 600;
}
.muestra-rutina__ejercicios strong {
  color: var(--color-acento);
}
.muestra-rutina__ejercicios small {
  grid-column: 1 / -1;
  color: var(--color-texto-suave);
}
.muestra-rutina figcaption {
  padding-top: 1rem;
  border-top: var(--borde);
  color: var(--color-texto-suave);
  font-size: 0.8125rem;
}
.inicio-seccion {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem;
  border-top: var(--borde);
}
.inicio-seccion h2 {
  font-size: 1.5rem;
  max-width: 18ch;
}
.inicio-seccion > div {
  min-width: 0;
  max-width: 65ch;
}
.inicio-seccion > div > * + * {
  margin-top: 1rem;
}
.inicio-seccion ol {
  padding-inline-start: 1.5rem;
}
.inicio-seccion ol > li {
  padding: 0.5rem 0 1rem 0.5rem;
}
.inicio-seccion ol > li::before {
  display: none;
}
.inicio-seccion ol > li strong {
  display: block;
  margin-bottom: 0.25rem;
}
.pagina--inicio .aviso {
  border: 1px solid var(--color-aviso);
  border-radius: var(--radio-m);
  margin-bottom: 2rem;
}
@media (min-width: 54rem) {
  .inicio-presentacion {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .inicio-seccion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
  }
}
@media (max-width: 33rem) {
  .cabecera__fila {
    gap: 0.5rem;
    padding-block: 0.75rem;
  }
  .cabecera__fila > nav {
    width: 100%;
  }
  .navegacion {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
  }
  .navegacion a:not(.boton) {
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
  }
  .navegacion .boton {
    padding-inline: 0.625rem;
    font-size: 0.8125rem;
  }
  .inicio-presentacion {
    gap: 2rem;
  }
  .inicio-presentacion .acciones {
    flex-direction: column;
    align-items: stretch;
  }
  .muestra-rutina {
    padding: 1.25rem;
  }
}

/* Escritorio: presentación amplia del objeto y su contenido. El móvil conserva su composición. */
@media screen and (min-width: 64rem) {
  :root {
    --ancho-contenido: 82rem;
  }
  .cabecera__fila {
    min-height: 5.5rem;
  }
  .marca {
    gap: 0.75rem;
    font-size: 1.125rem;
    letter-spacing: -0.025em;
  }
  .marca::before {
    content: '';
    width: 1.75rem;
    height: 1.75rem;
    background: url('/favicon.svg') center / contain no-repeat;
  }
  .navegacion {
    gap: 1rem;
  }
  .navegacion a:not(.boton) {
    border-radius: 0.5rem;
    border-bottom-width: 1px;
    font-size: 0.875rem;
  }
  .pagina--inicio {
    padding-top: 2.5rem;
  }
  .inicio-presentacion {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    padding-block: 1.5rem 3rem;
  }
  .inicio-presentacion__texto {
    gap: 1.75rem;
  }
  .inicio-presentacion h1 {
    max-width: 15ch;
    font-size: clamp(3.25rem, 4.25vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .inicio-presentacion .entradilla {
    max-width: 43ch;
    color: var(--color-texto-suave);
    font-size: 1.0625rem;
    line-height: 1.75;
  }
  .inicio-presentacion .acciones {
    gap: 0.75rem;
    margin-top: 0.25rem;
  }
  .inicio-presentacion .boton {
    font-size: 0.875rem;
    min-height: 3.25rem;
    border-radius: 0.75rem;
  }
  .inicio-presentacion .boton--primario {
    padding-inline: 1.5rem;
  }
  .inicio-producto {
    display: grid;
    grid-template-columns: minmax(4.5rem, 0.35fr) minmax(0, 1fr);
    align-items: center;
    position: relative;
    min-height: 34rem;
    padding: 2.5rem 1.75rem 2.5rem 0.5rem;
    background: var(--color-acento-suave);
    border-radius: 2rem;
  }
  .pulsera-ilustracion {
    display: block;
    width: 11rem;
    max-width: none;
    justify-self: center;
    transform: rotate(-14deg);
    filter: drop-shadow(0 18px 16px rgb(7 17 35 / 0.24));
  }
  .inicio-producto .muestra-rutina {
    z-index: 1;
    max-width: none;
    padding: 1.5rem;
    border-color: var(--color-borde-suave);
    border-radius: 1.25rem;
    background: var(--color-fondo);
    box-shadow: 0 20px 36px -24px rgb(7 17 35 / 0.4);
  }
  .muestra-rutina__cabecera {
    font-size: 1.25rem;
  }
  .muestra-rutina__dia {
    padding-block: 1.25rem;
  }
  .muestra-rutina__dia strong {
    font-size: 0.875rem;
  }
  .muestra-rutina__ejercicios li {
    padding-block: 1.125rem;
    font-size: 0.875rem;
  }
  .muestra-rutina__ejercicios small {
    font-size: 0.75rem;
    line-height: 1.65;
  }
  .muestra-rutina__ejercicios strong {
    align-self: center;
    font-size: 1.125rem;
  }
  .pagina--inicio .aviso {
    font-size: 0.8125rem;
    line-height: 1.65;
    padding: 1rem 1.25rem;
    margin-bottom: 2.5rem;
  }
  .inicio-seccion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding-block: 3rem;
  }
  .inicio-seccion h2 {
    font-size: 1.75rem;
    max-width: 14ch;
  }
  .inicio-seccion > div {
    max-width: none;
  }
  .inicio-seccion ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding-inline-start: 1.25rem;
  }
  .inicio-seccion ol > li {
    padding: 0 0.5rem 0 0.25rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
  }
  .inicio-seccion ol > li strong {
    margin-bottom: 0.75rem;
    color: var(--color-texto);
  }
}

@media screen and (min-width: 64rem) and (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #10151e;
    --color-superficie: #171d27;
    --color-superficie-2: #252f3e;
    --color-borde-suave: #303b4b;
    --color-texto: #f0f3fa;
    --color-texto-suave: #b3bfd1;
    --color-acento: #b4c9ff;
    --color-acento-hover: #d4dfff;
    --color-acento-suave: #263754;
    --color-sobre-acento: #14223b;
    --color-foco: #b4c9ff;
    --color-foco-anillo: #10151e;
  }
  .inicio-producto {
    background: #1e2b43;
  }
  .inicio-producto .muestra-rutina {
    background: #171d27;
  }
}

@media screen and (min-width: 64rem) and (prefers-contrast: more) {
  :root {
    --color-texto-suave: var(--color-texto);
    --color-borde-suave: var(--color-borde);
  }
}

/* --- Pie ----------------------------------------------------------------------------------- */

.pie {
  flex-shrink: 0;
  overflow-wrap: anywhere;
  padding-block: var(--esp-5);
  border-block-start: var(--borde);
  background: var(--color-superficie);
  font-size: var(--texto-s);
}
.pie__rejilla {
  display: grid;
  gap: var(--esp-5);
}
@media (min-width: 40rem) {
  .pie__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pie__titulo {
  margin-block-end: var(--esp-2);
  font-weight: 700;
}
.pie ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie li + li {
  margin-block-start: 0;
}
.pie li a,
.pie p a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
}

/* --- Preferencias del sistema -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Contraste forzado (Windows): se usan los colores del sistema y se marcan los bordes. */
@media (forced-colors: active) {
  .boton,
  .aviso,
  .tarjeta,
  .indice,
  .tabla-envoltura,
  pre.bloque,
  #como-funciona + ol > li {
    border: 1px solid CanvasText;
  }
  .boton--primario,
  .saltar {
    border: 2px solid ButtonText;
  }
  .aviso {
    border-inline-start-width: 0.375rem;
  }
  .navegacion a[aria-current] {
    border-block-end-color: Highlight;
  }
  #como-funciona + ol > li::before {
    border: 1px solid CanvasText;
  }
  mark.pendiente {
    border: 1px dashed CanvasText;
  }
  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}

/* --- Impresión ----------------------------------------------------------------------------- */

@media print {
  :root {
    --color-fondo: #ffffff;
    --color-texto: #000000;
    --color-texto-suave: #000000;
    --color-acento: #000000;
  }
  body {
    display: block;
    min-height: 0;
    font-size: 12pt;
    line-height: 1.45;
  }
  .saltar,
  .cabecera,
  .migas,
  .indice,
  .acciones,
  .pie nav,
  .pie a[href='/panel/'] {
    display: none !important;
  }
  .contenedor {
    max-width: none;
    padding-inline: 0;
  }
  main {
    padding-block: 0;
  }
  .pagina > article > :not(.contenido),
  .contenido {
    max-width: none;
  }
  .contenido > h2,
  .contenido > h3 {
    break-after: avoid;
  }
  table,
  .aviso,
  pre.bloque,
  li {
    break-inside: avoid;
  }
  .tabla-envoltura,
  pre.bloque {
    overflow: visible;
  }
  a {
    color: #000000;
  }
  .contenido a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  .pie {
    border: 0;
    background: transparent;
  }
}