/* ============================================================
   41 — atlas estelar grabado
   Campo azul-negro continuo. Filete fino. Notación medida.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('assets/fonts/splinesansmono-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* campo */
  --ink:      #03060E;
  --ink-1:    #071020;
  --ink-2:    #0A1526;

  /* tinta */
  --star:     #DCE7F5;
  --text:     #DCE7F5;
  --text-2:   #93A9C4;
  --rule:     #8FB4D8;
  --cyan:     #38D6FF;

  /* Jerarquía de filete. Una plancha grabada tiene pesos de línea distintos
     según lo que la línea significa; un solo filete repetido es un plano. */
  --rule-1:   rgba(143, 180, 216, 0.62);  /* filete maestro: cabecera de plancha */
  --hair-2:   rgba(143, 180, 216, 0.40);  /* filete de cota y tope */
  --hair:     rgba(143, 180, 216, 0.22);  /* filete de cartela */
  --hair-3:   rgba(143, 180, 216, 0.09);  /* división menor: separación de fila */

  /* medida */
  --gut:      clamp(1.25rem, 4vw, 3rem);
  --band:     clamp(4.5rem, 10vw, 9rem);
  --max:      78rem;

  --face:     'Archivo', system-ui, sans-serif;
  --mono:     'Spline Sans Mono', ui-monospace, monospace;

  --ease:     cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

/* ── reset acotado ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--face);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: 1.55;
  font-feature-settings: 'kern' 1;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.032em; text-wrap: balance; }
p  { margin: 0; }
ol, ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }

/* ── superficies del navegador: también son diseño ─────────── */
::selection { background: var(--cyan); color: var(--ink); }
:root { accent-color: var(--cyan); caret-color: var(--cyan); }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 1px;
}
* { scrollbar-color: rgba(143, 180, 216, 0.30) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ink); }
*::-webkit-scrollbar-thumb {
  background: rgba(143, 180, 216, 0.26);
  border: 3px solid var(--ink);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(143, 180, 216, 0.44); }
a { color: inherit; text-underline-offset: 0.28em; text-decoration-thickness: 1px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--gut); top: -4rem; z-index: 20;
  background: var(--ink-2); color: var(--text);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.6rem 1rem; border: 1px solid var(--hair-2);
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 1rem; }

/* ── notación: la voz de la medida ─────────────────────────── */
.entry__fields, .row__num, .row__meta, .gantt__d,
.chart__readout, .chrome__lang, .chrome__nav, .channels dt, .skip {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CHROME
   ============================================================ */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: var(--gut);
  padding: 0.5rem var(--gut);
  min-height: 60px;
  border-bottom: 1px solid var(--hair-3);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
}
/* Todo lo pulsable llega a 44px de alto aunque su tinta sea pequeña. */
.chrome__mark, .chrome__nav a, .chrome__lang button {
  display: inline-flex; align-items: center; min-height: 44px;
}
.chrome__mark { flex: none; padding-inline: 0.25rem; }
.chrome__mark svg { width: auto; height: 1.35rem; }
.chrome__nav { margin-inline-start: auto; display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); }
.chrome__nav a {
  font-size: 0.78rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
  transition: color 0.2s var(--ease);
}
.chrome__nav a:hover { color: var(--star); }
.chrome__lang { display: flex; align-items: center; gap: 0.45rem; color: var(--text-2); font-size: 0.78rem; }
.chrome__lang button {
  background: none; border: 0; padding-inline: 0.4rem; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: 0.11em;
  transition: color 0.2s var(--ease);
}
.chrome__lang button:hover { color: var(--star); }
.chrome__lang button[aria-pressed='true'] { color: var(--cyan); }

/* ============================================================
   LA CARTA
   ============================================================ */
.chart {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(5rem, 12vh, 7.5rem) var(--gut) 1.4rem;
  isolation: isolate;
}
.chart__content { align-self: center; }
.chart__foot { align-self: end; width: 100%; max-width: var(--max); margin-inline: auto; }
.chart__canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
}
.chart__content {
  width: 100%; max-width: var(--max); margin-inline: auto;
}
/* Cartela de título: en una carta grabada el texto no flota sobre la figura,
   va dentro de un recuadro reservado con su filete. Resuelve la legibilidad
   sin velos ni degradados. */
.plate { display: grid; gap: clamp(1.3rem, 2.4vw, 1.9rem); }

/* ficha de catálogo */
.entry {
  border-block: 1px solid var(--hair);
  padding-block: 0.85rem;
  width: fit-content;
  min-width: min(22rem, 100%);
}
.entry__desig {
  font-family: var(--mono);
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.7rem;
}
.entry__fields { display: grid; gap: 0.3rem; font-size: 0.8rem; }
.entry__fields > div { display: flex; gap: 0.75rem; }
.entry__fields dt {
  flex: none; width: 5.5rem;
  color: var(--text-2); letter-spacing: 0.1em; text-transform: uppercase;
}
.entry__fields dd { color: var(--star); }

/* el gancho */
.hook {
  font-size: clamp(2.1rem, 1.25rem + 3.4vw, 3.9rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
  max-width: 18ch;
}
.hook__sub {
  color: var(--text-2);
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
}

/* acciones */
.actions { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }

/* cartela de doble filete */
.cartouche {
  --pad: 1.05rem;
  position: relative;
  display: inline-block;
  padding: var(--pad) calc(var(--pad) * 1.9);
  border: 1px solid var(--rule);
  background: none; cursor: pointer;
  color: var(--star); text-decoration: none;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cartouche::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid var(--hair);
  transition: inset 0.35s var(--ease), border-color 0.35s var(--ease);
  pointer-events: none;
}
.cartouche:hover { color: var(--cyan); border-color: var(--cyan); }
.cartouche:hover::before { inset: 7px; border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.cartouche:disabled { opacity: 0.45; cursor: not-allowed; }
.cartouche:disabled:hover { color: var(--star); border-color: var(--rule); }

.plain {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2); font-size: 0.95rem;
  text-decoration-color: var(--hair-2);
  transition: color 0.2s var(--ease);
}
.plain:hover { color: var(--cyan); text-decoration-color: currentColor; }

/* índice de planchas: lo que se vende, dentro del primer viewport */
.index {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--rule-1);
  background: var(--hair-3);
}
.index a {
  display: grid; gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  background: var(--ink);
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.index a:hover { background: var(--ink-2); }
.index a > span:not(.index__n) { font-size: 0.95rem; color: var(--star); letter-spacing: -0.02em; }
.index__n {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; color: rgba(147, 169, 196, 0.78);
}
.index em {
  font-family: var(--mono); font-style: normal; font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan);
}

/* lectura de coordenadas al pie de la carta */
.chart__readout {
  margin-top: 0.9rem; padding-top: 0.7rem;
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(147, 169, 196, 0.78); /* 5,2:1 sobre el campo: apagado pero legible */
  border-top: 1px solid var(--hair-3);
}
.chart__readout span:last-child { margin-inline-start: auto; }

/* ============================================================
   BANDAS
   ============================================================ */
.band {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--band) var(--gut) 0;
}
.band:last-of-type { padding-bottom: var(--band); }
/* Cabecera de plancha: filete maestro, contrafilete a 4px y marca de
   registro en el margen. Es la firma del grabado, y la que separa una banda
   de la siguiente sin repetir el mismo trazo cinco veces. */
.band__head {
  position: relative;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-1);
}
.band__head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--hair-3);
}
.band__head::before {                 /* marca de registro */
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 1px; height: 11px; background: var(--rule-1);
}

/* filas de catálogo */
.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  border-bottom: 1px solid var(--hair-3);
}
.row__num { color: rgba(147, 169, 196, 0.78); font-size: 0.78rem; letter-spacing: 0.1em; }
.row__name { font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.45rem); letter-spacing: -0.028em; }
.row__desc { color: var(--text-2); max-width: 60ch; font-size: 0.98rem; }
.row__meta {
  color: var(--cyan); font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}

/* el precio se cierra hablando, y se dice así */
.note__real { margin-top: 2rem; color: var(--text-2); font-size: 0.98rem; max-width: 60ch; }

/* ── los catorce días, acotados contra una escala real ─────── */
.gantt { display: grid; }
.gantt__head,
.gantt__rows li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}

/* la regla: catorce marcas, tres rotuladas */
.gantt__ruler {
  display: grid; grid-template-columns: repeat(14, 1fr);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.45rem; margin-bottom: 0.5rem;
}
.gantt__ruler i {
  position: relative;
  font: 500 0.8rem/1 var(--mono); font-style: normal;
  color: var(--text-2); letter-spacing: 0.06em;
}
.gantt__ruler i::after {           /* la marca de escala baja hasta la regla */
  content: ''; position: absolute; left: 0; bottom: -0.5rem;
  width: 1px; height: 0.35rem; background: var(--hair-2);
}
.gantt__ruler i[data-tick]::after { height: 0.6rem; background: var(--rule); bottom: -0.5rem; }
.gantt__ruler i:last-child { text-align: right; }
.gantt__ruler i:last-child::after { left: auto; right: 0; }

.gantt__rows li { padding-block: 0.7rem; border-bottom: 1px solid var(--hair-3); }
.gantt__t { font-size: 0.98rem; }
.gantt__d {
  color: var(--text-2); font-size: 0.8rem;
  letter-spacing: 0.08em; text-align: right; white-space: nowrap;
}

/* la cota: ocupa exactamente sus días de los catorce, con topes a los lados */
.gantt__bar { position: relative; display: block; height: 1.15rem; }
.gantt__bar::before {
  content: ''; position: absolute; inset-block: 0;
  left: calc((var(--from) - 1) / 14 * 100%);
  width: calc((var(--to) - var(--from) + 1) / 14 * 100%);
  background: rgba(56, 214, 255, 0.08);
  border-inline: 1px solid var(--rule);
}
.gantt__bar::after {               /* el eje de la cota */
  content: ''; position: absolute; top: 50%;
  left: calc((var(--from) - 1) / 14 * 100%);
  width: calc((var(--to) - var(--from) + 1) / 14 * 100%);
  height: 1px; background: var(--hair-2);
}
.gantt__rows .is-last .gantt__bar::before { background: rgba(56, 214, 255, 0.2); border-color: var(--cyan); }
.gantt__rows .is-last .gantt__t { color: var(--cyan); }

/* ── vacío honesto: una entrada reservada del catálogo ─────── */
.empty {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  border-block: 1px solid var(--hair-3);
  border-bottom-style: dashed;
}
.empty__num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: rgba(147, 169, 196, 0.78); }
.empty__body { display: grid; gap: 0.85rem; max-width: 60ch; }
.empty__desig { font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.45rem); letter-spacing: -0.028em; }
.empty__body p { color: var(--text-2); font-size: 0.98rem; }
.empty__meta {
  font-family: var(--mono); font-size: 0.8rem; color: var(--text-2);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact__lead { display: grid; gap: 1.8rem; justify-items: start; }
.contact__p {
  max-width: 34ch;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.4; letter-spacing: -0.018em;
  text-wrap: pretty;
}

/* canales: la misma cartela de ficha que la entrada del atlas */
.channels { display: grid; border-top: 1px solid var(--hair); }
.channels > div {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem; align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--hair-3);
}
.channels > div:last-child { border-bottom-color: var(--hair); }
.channels dt {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
}
.channels dd { color: var(--star); overflow-wrap: anywhere; }
.channels a {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.6rem;
  color: var(--star);
  text-decoration-color: var(--hair-2); text-underline-offset: 0.25em;
  transition: color 0.2s var(--ease);
}
.channels a:hover { color: var(--cyan); text-decoration-color: currentColor; }

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */
.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(7rem, 16vh, 10rem) var(--gut) clamp(4rem, 9vw, 7rem);
}
.legal__h {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-1);
  position: relative;
}
.legal__h::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--hair-3);
}
.legal__date {
  margin-top: 1.4rem;
  font-family: var(--mono); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.legal__date time { color: var(--star); text-transform: none; letter-spacing: 0.02em; }
.legal h2 {
  margin-top: clamp(2.6rem, 5vw, 3.6rem); margin-bottom: 0.9rem;
  font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.35rem);
}
.legal p, .legal li { color: var(--text-2); max-width: 68ch; }
.legal p + p { margin-top: 0.9rem; }
.legal ul { margin: 0.9rem 0 0; display: grid; gap: 0.4rem; }
.legal li { position: relative; padding-left: 1.4rem; }
.legal li::before {
  content: ''; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 1px; background: var(--hair-2);
}
.legal a { color: var(--cyan); }
.legal__id {
  margin-top: 1.1rem; display: grid; gap: 0.5rem;
  border-block: 1px solid var(--hair); padding-block: 1rem;
}
.legal__id > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; }
.legal__id dt {
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.legal__id dd { color: var(--star); }
@media (max-width: 40rem) {
  .legal__id > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ============================================================
   PIE
   ============================================================ */
.foot {
  border-top: 1px solid var(--hair-3);
  padding: 2.5rem var(--gut);
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between;
  max-width: var(--max); margin-inline: auto;
  font-size: 0.8rem; color: var(--text-2);
}
.foot__tag {
  font-family: var(--mono);
  letter-spacing: 0.28em; text-transform: uppercase;
}
.foot__links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2); text-decoration-color: var(--hair-2);
  transition: color 0.2s var(--ease);
}
.foot__links a:hover { color: var(--cyan); text-decoration-color: currentColor; }

/* ============================================================
   ADAPTACIÓN
   ============================================================ */
/* Plancha de atlas: la figura manda desde el centro y el bloque de título
   se apoya sobre ella por la izquierda, como la cartela de una carta. */
@media (min-width: 62rem) {
  .plate {
    position: relative;
    width: fit-content; max-width: 54%;
    padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.8rem, 3vw, 2.6rem);
    border-left: 1px solid var(--rule-1);
    background: color-mix(in srgb, var(--ink) 86%, transparent);
  }
  .plate::after {                       /* contrafilete de la cartela */
    content: ''; position: absolute; left: 3px; top: 0; bottom: 0;
    width: 1px; background: var(--hair-3);
  }
  .plate > * { max-width: 36rem; }
  .hook { max-width: 18ch; }
  .hook__sub { max-width: 50ch; }
}

@media (max-width: 62rem) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .chrome__nav { display: none; }
  .chrome__lang { margin-inline-start: auto; }
  .row {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    row-gap: 0.35rem;
  }
  .row__num { grid-row: span 3; }
  .row__meta { grid-column: 2; }
  .empty { grid-template-columns: 3.2rem minmax(0, 1fr); row-gap: 0.5rem; }
  .empty__num { grid-row: span 2; }
  .empty__meta { grid-column: 2; }
  /* En estrecho el rótulo va encima, pero la REGLA se queda: sin escala la
     cota no mide nada, y es en el móvil donde el comprador decide. */
  .gantt__head {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0.7rem;
  }
  .gantt__head > span:first-child,
  .gantt__head > span:last-child { display: none; }
  .gantt__rows li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 1rem;
  }
  .gantt__bar { grid-column: 1 / -1; }
  .chart__readout { font-size: 0.76rem; gap: 1rem; }
  .chart__readout span:last-child { margin-inline-start: 0; }

  /* Índice de planchas en una sola línea: en 390px la figura necesita ese
     alto más que el índice necesita tres filas, y la ficha ya dice qué se
     vende. El catálogo completo está a un scroll. */
  .index {
    display: flex; flex-wrap: wrap; gap: 0 1.1rem;
    background: none; border-top: 1px solid var(--rule-1);
    padding-top: 0.7rem;
  }
  .index { row-gap: 14px; padding-top: 0.45rem; }
  .index a,
  .index a + a { position: relative; display: flex; align-items: baseline; gap: 0.4rem; padding: 0.25rem 0; background: none; }
  /* 44 px de diana táctil sin crecer la cartela: el área se amplía por
     fuera del rótulo y el hueco entre filas evita que dos dianas se pisen. */
  .index a::after { content: ''; position: absolute; inset: -7px 0; }
  .index a > span:not(.index__n) { font-size: 0.88rem; }
  .index em { display: none; }

  /* la carta arriba, el contenido debajo: apilados, sin pisarse */
  .chart { padding-bottom: 0.5rem; }
  .chart__content { align-self: end; }
  .plate { gap: 0.85rem; }
  .entry { padding-block: 0.7rem; }

  /* La acción y su alternativa van en una sola línea: si se parten, la
     cartela crece hacia arriba y pisa la figura. */
  .actions { column-gap: 0.75rem; }
  .actions .cartouche { padding-inline: 1rem; letter-spacing: 0.1em; }
}

/* Móvil bajo (360×740 y similares): la figura ocupa su alto fijo arriba y la
   cartela no cabe entera debajo. Cede la ficha, que repite lo que ya dicen el
   titular (14 días) y el índice; la designación 41 · AI se queda. */
@media (max-width: 48rem) and (max-height: 800px) {
  .entry__fields { display: none; }
  .plate { margin-bottom: 1rem; }
}

/* ── movimiento reducido: la carta se entrega ya compuesta ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}