/* Celeste TCG — hoja de estilo única. Sin build, sin dependencias, sin CDN.

   Dirección: la página ES el foil de una carta. El papel no es negro ni blanco:
   es nacarado, con las líneas diagonales del holo y los destellos prismáticos
   corriendo por debajo, siempre gobernados por el celeste de la marca — el
   arcoíris solo asoma en los bordes del barrido. Encima, superficies blancas
   translúcidas: el protector de plástico sobre la carta.

   El lenguaje visual sale de la carta física — marco amarillo, ventana de arte,
   fichas de energía, líneas de ataque — nunca del arte de Pokémon, que es de
   Nintendo/Creatures/GAME FREAK. */

:root {
  /* papel nacarado: base celeste clarísima, nunca blanco puro */
  --paper:     #DFEFFB;
  --paper-2:   #F6FBFF;
  --surface:   rgba(255, 255, 255, .74);   /* el sleeve sobre la carta */
  --surface-2: rgba(255, 255, 255, .92);
  --line:      #BFDCF0;
  --line-2:    #93C3E4;

  --ink:       #08202F;
  --ink-soft:  #37596F;
  --ink-dim:   #5E7F95;

  /* celeste de marca (de ../marca/*.svg) */
  --sky-300:   #7DD3FC;
  --sky-400:   #38BDF8;
  --sky-500:   #0EA5E9;
  --sky-600:   #0284C7;
  --sky-700:   #0369A1;

  /* amarillo del marco de carta */
  --gold:      #F8CE2B;
  --gold-deep: #B8890A;

  /* energías, un punto más profundas que en pantalla oscura para que
     mantengan su color contra el papel claro */
  --fire:      #F2542D;
  --water:     #1AA2DE;
  --grass:     #17A65C;
  --psychic:   #8B5CF6;
  --lightning: #D9A400;

  --shadow:    0 18px 40px -28px rgba(6, 52, 86, .55);
  --shadow-lg: 0 30px 60px -32px rgba(6, 52, 86, .7);

  --wrap: 70rem;

  /* Cuerpo en grotesca contemporánea, titulares en geométrica. Lo que no puede
     ser es la pila del sistema (-apple-system / Segoe / Roboto): es la
     tipografía por defecto de media web y deja la página con cara de plantilla. */
  --font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Jost", "Futura", "Avenir Next", "Century Gothic",
                  "Trebuchet MS", sans-serif;
}

/* ============ tipografía, servida desde el propio dominio ============
   Auto-hospedadas, no desde Google: un tercero en una página que hoy no tiene
   ninguno, y `style-src 'self'` del CSP lo bloquearía igualmente. Ambas son
   OFL (licencias junto a los .woff2). Subseteadas a latín y con el eje óptico
   fijado en 16: 96 KB las tres, contra 304 KB los originales. */

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-v2.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-v3.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-italic-v3.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* Chrome en Android agranda el texto por su cuenta */
          text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ============ el foil, debajo de todo ============
   Dos capas fijas: los destellos prismáticos (difuminados, con el celeste
   ocupando la mitad de la vuelta) y encima las líneas diagonales del holo.
   Van en position:fixed a propósito — el brillo se queda quieto mientras el
   contenido pasa por delante, como cuando inclinas la carta bajo la luz. */

@keyframes holo-drift {
  0%   { background-position: 0% 50%,   0% 50%; }
  100% { background-position: 300% 50%, 200% 50%; }
}
@keyframes holo-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}
@keyframes holo-sweep {
  0%   { background-position: 0 0; }
  100% { background-position: 220vw 0; }
}

/* los destellos: manchas de color sobre papel casi blanco. Celeste arriba,
   donde cae la vista; el resto del prisma asoma por los bordes. */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    /* el claro donde cae el texto: sin esto el titular pelea con el color */
    radial-gradient(44rem 34rem at 22% 30%,  rgba(255, 255, 255, .92), transparent 68%),
    radial-gradient(38rem 26rem at 50% 100%, rgba(255, 255, 255, .8),  transparent 66%),
    /* el prisma, con el celeste ocupando la mitad de la vuelta */
    radial-gradient(56rem 40rem at 82% -6%,  rgba(56, 189, 248, .72),  transparent 62%),
    radial-gradient(40rem 30rem at 100% 46%, rgba(178, 150, 255, .58), transparent 60%),
    radial-gradient(34rem 26rem at -4% 62%,  rgba(255, 168, 214, .52), transparent 60%),
    radial-gradient(42rem 30rem at 70% 96%,  rgba(110, 240, 190, .5),  transparent 60%),
    radial-gradient(32rem 24rem at 16% 92%,  rgba(255, 226, 130, .5),  transparent 60%),
    radial-gradient(46rem 34rem at 6%  -4%,  rgba(125, 211, 252, .6),  transparent 64%);
  filter: blur(40px) saturate(1.05);
  animation: holo-breathe 28s ease-in-out infinite;
}

/* las líneas del holo, pero solo dentro de dos bandas de luz que cruzan la
   página en diagonal — un foil no brilla entero a la vez, brilla por donde
   le da la luz. */
body::after {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(104deg,
    rgba(255,255,255,.95) 0 3px, rgba(255,255,255,0) 3px 13px);
  background-size: 220vw 100%;
  -webkit-mask-image: linear-gradient(104deg,
    transparent 4%, rgba(0,0,0,.85) 17%, transparent 31%,
    transparent 49%, rgba(0,0,0,.7) 62%, transparent 76%,
    transparent 88%, rgba(0,0,0,.5) 96%);
          mask-image: linear-gradient(104deg,
    transparent 4%, rgba(0,0,0,.85) 17%, transparent 31%,
    transparent 49%, rgba(0,0,0,.7) 62%, transparent 76%,
    transparent 88%, rgba(0,0,0,.5) 96%);
  opacity: .55;
  animation: holo-sweep 40s linear infinite;
}

img { max-width: 100%; height: auto; }
a { color: var(--sky-700); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 .5em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.55rem); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 1em; }

.skip { position: absolute; left: -9999px; background: var(--sky-700); color: #fff; padding: .7rem 1.1rem; }
.skip:focus { left: 0; top: 0; z-index: 20; }
:focus-visible { outline: 3px solid var(--sky-600); outline-offset: 3px; border-radius: 4px; }

/* el brillo prismático aplicado a un elemento concreto: titular, borde, ventana.
   Los tonos son profundos porque aquí van sobre papel claro. */
.holo-ink,
.site-header::after,
.buying::after {
  background-image:
    repeating-linear-gradient(102deg,
      rgba(255,255,255,.16) 0 5px, rgba(255,255,255,0) 5px 13px),
    linear-gradient(96deg,
      #0369A1, #0284C7, #3F63E8, #7C3AED, #B01E77, #96540B,
      #0B7A45, #0284C7, #0369A1);
  background-size: 140% 100%, 200% 100%;
  animation: holo-drift 16s linear infinite;
}

/* ---------------------------- header ---------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .95rem max(1.5rem, calc((100vw - var(--wrap)) / 2));
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -30px rgba(6, 52, 86, .8);
}
/* el filo prismático del canto de la carta, corriendo bajo la barra */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  opacity: .85;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand img { border-radius: 9px; box-shadow: 0 2px 8px -3px rgba(2, 132, 199, .8); }
.brand-text { display: flex; align-items: baseline; gap: .4rem; }
.brand-text b { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; letter-spacing: .1em; }
.brand-text i { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .3em; color: var(--sky-600); }

.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.site-header nav a {
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  color: var(--ink-soft); text-decoration: none; letter-spacing: .005em;
}
.site-header nav a:hover { color: var(--sky-700); }

/* ---------------------------- botones ---------------------------- */

.btn {
  display: inline-block;
  background: linear-gradient(180deg, #FFE175, var(--gold) 55%, #E8B70F);
  color: #1A1200; text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  border: 1px solid var(--gold-deep);
  box-shadow: 0 2px 0 var(--gold-deep), 0 12px 22px -16px rgba(120, 88, 0, .9);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: linear-gradient(180deg, #FFEA9E, #FFD84E 55%, #F0C41C); transform: translateY(-1px); }
.btn-sm { padding: .48rem 1rem; font-size: .88rem; }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--sky-500); color: var(--sky-700); }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 2rem 0 .9rem; }

/* la línea de set de una carta, no la etiqueta con puntito de una landing */
.setline {
  font-family: var(--font-display); font-weight: 500;
  font-size: .82rem; color: var(--ink-dim);
  margin-bottom: 1.2rem; letter-spacing: .01em;
}
.setline span { color: var(--gold-deep); opacity: .8; margin: 0 .15em; }

/* ---------------------------- hero ---------------------------- */

.hero {
  max-width: var(--wrap); margin: 0 auto; padding: 4.5rem 1.5rem 5rem;
  position: relative;
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.hero > * { position: relative; z-index: 1; }

h1 { margin-bottom: 1.4rem; }
.h1-top, .h1-holo {
  display: block;
  font-size: clamp(2.5rem, 6.2vw, 4.15rem);
  font-weight: 700; letter-spacing: -.025em;
}
.h1-holo {
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  filter: saturate(1.1);
}

.lede { font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.note { font-size: .92rem; color: var(--ink-dim); margin: 0; max-width: 42ch; }

/* ------------------ la carta del hero ------------------
   Marco amarillo + ventana de arte + líneas de ataque: se lee como una
   carta al instante, y no hay un solo pixel de propiedad ajena. */

.hero-art { display: flex; justify-content: center; perspective: 1200px; }

.tcg-card {
  width: min(23rem, 100%);
  aspect-ratio: 5 / 7;
  border-radius: 16px;
  padding: 9px;
  background: linear-gradient(150deg, #FFF0B8, var(--gold) 42%, var(--gold-deep));
  box-shadow:
    0 2px 0 rgba(255,255,255,.6) inset,
    var(--shadow-lg),
    0 0 80px -34px rgba(14, 165, 233, .9);
  transform: rotate(-4deg) rotateY(9deg);
  transition: transform .4s ease;
}
.tcg-card:hover { transform: rotate(-1deg) rotateY(0deg) translateY(-6px); }

/* interior claro, como una carta moderna de verdad */
.tcg-inner {
  height: 100%;
  border-radius: 9px;
  background:
    linear-gradient(170deg, #FFFFFF, #EAF4FC 60%, #DCEDF9);
  border: 1px solid rgba(120, 90, 10, .35);
  padding: .7rem .75rem .6rem;
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(.64rem, 1.4vw, .8rem);
  color: var(--ink);
  letter-spacing: .002em;
}

.tcg-topline { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tcg-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35em; letter-spacing: -.01em; }
.tcg-hp { display: inline-flex; align-items: center; gap: .28em; color: var(--ink-soft); font-size: .82em; }
.tcg-hp b { color: var(--ink); font-size: 1.25em; }

.tcg-window {
  position: relative; margin: .55rem 0 .5rem;
  flex: 1 1 auto; min-height: 0;
  border-radius: 4px;
  border: 2px solid var(--gold-deep);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tcg-window::before {           /* patrón "cosmos": puntos finos sobre el foil */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.6) .9px, transparent 1.1px),
    repeating-linear-gradient(102deg, rgba(255,255,255,.34) 0 4px, rgba(255,255,255,0) 4px 11px),
    linear-gradient(96deg, #0EA5E9, #35C6FF, #A855F7, #FF4D94, #FFB03C, #37E39B, #35C6FF, #0EA5E9);
  background-size: 13px 13px, 150% 100%, 210% 100%;
  animation: holo-drift 16s linear infinite;
  filter: saturate(1.15);
}
.tcg-window::after {            /* viñeta: da profundidad y despega el destello */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(4, 40, 66, .45) 100%),
    linear-gradient(200deg, rgba(255,255,255,.22), transparent 45%);
}
.tcg-window img { position: relative; width: 42%; filter: drop-shadow(0 3px 12px rgba(0, 30, 55, .55)); }
.tcg-shine {                    /* barrido de luz sobre el foil */
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(72deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: holo-drift 11s linear infinite;
  mix-blend-mode: soft-light;
}

.tcg-flavor {
  margin: 0 0 .45rem; font-family: var(--font); font-style: italic;
  font-weight: 500;
  color: var(--ink-dim); font-size: .88em; letter-spacing: .02em;
}

.tcg-move {
  display: flex; align-items: center; gap: .45em;
  padding: .38rem 0;
  border-top: 1px solid rgba(8, 32, 47, .12);
}
.move-name { font-weight: 600; flex: 1 1 auto; }
.move-dmg { font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); }

.tcg-footer {
  margin: .45rem 0 0; padding-top: .4rem;
  border-top: 1px solid rgba(8, 32, 47, .12);
  color: var(--ink-dim); font-size: .78em; letter-spacing: .04em;
}

/* fichas de energía, ya solo dentro de la carta: discos planos, mate y
   pequeños. Con gradiente radial y sombra interior parecían caramelos. */
.energy {
  display: inline-block; flex: none;
  width: .72em; height: .72em; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.75);
}
.energy-fire      { background: var(--fire); }
.energy-water     { background: var(--water); }
.energy-grass     { background: var(--grass); }
.energy-psychic   { background: var(--psychic); }
.energy-lightning { background: var(--lightning); }

/* ---------------------------- texto de sabor ---------------------------- */

.flavor-strip {
  max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 0;
  font-style: italic; font-size: 1.02rem; line-height: 1.55;
  color: var(--ink-soft); text-align: center;
  border-top: 1px solid var(--line);
}

/* ---------------------------- promesas ----------------------------
   No son cuatro tarjetas en rejilla: es el cuadro de ataques de una carta.
   Una hoja, cuatro líneas, cada una con su energía y su valor a la derecha. */

.promises { max-width: var(--wrap); margin: 0 auto; padding: 5rem 1.5rem 4rem; }
.section-sub { color: var(--ink-soft); max-width: 52ch; margin-top: -.2rem; }

.promise-sheet {
  margin: 2.6rem 0 0;
  border-radius: 14px; padding: 7px;
  background: linear-gradient(150deg, #FFF0B8, var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 2px 0 rgba(255,255,255,.55) inset, var(--shadow);
}
.promise-list {
  list-style: none; margin: 0; padding: .3rem 1.4rem;
  border-radius: 8px;
  background: linear-gradient(170deg, #FFFFFF, #EFF7FD);
  border: 1px solid rgba(120, 90, 10, .28);
}
.promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem 1.15rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(8, 32, 47, .11);
}
.promise:first-child { border-top: 0; }
/* el número de la fila hace el trabajo que hacía la ficha de color: ordena y
   marca el tipo, pero con tipografía en vez de un adorno */
.promise-no {
  align-self: start;
  font-family: var(--font-display);
  font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
  padding-top: .28rem; opacity: .9;
}
.promise h3 { margin: 0 0 .35rem; font-size: 1.22rem; }
.promise p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.55; max-width: 54ch; }
.promise-dmg {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--ink);
  white-space: nowrap; text-align: right;
}
.promise-dmg small { display: block; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }

.t-grass     h3, .t-grass     .promise-no { color: #0E8049; }
.t-fire      h3, .t-fire      .promise-no { color: #C93C17; }
.t-lightning h3, .t-lightning .promise-no { color: #9C7500; }
.t-psychic   h3, .t-psychic   .promise-no { color: #6D40D9; }

/* el pie de la hoja: número de set y rareza, como el borde inferior de una carta */
.sheet-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin: .9rem .2rem 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: .76rem; letter-spacing: .06em; color: var(--ink-dim);
}
.sheet-footer b { color: var(--ink-soft); font-weight: 700; }

/* ---------------------------- compra de cartas ---------------------------- */

.buying {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .44);
  border-block: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
}
.buying::after {                 /* filo holo arriba: el canto de la hoja */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  opacity: .9;
}
.buying::before {                /* rejilla de hoja de binder, 3 columnas */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(2, 132, 199, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 132, 199, .22) 1px, transparent 1px);
  background-size: 7.5rem 10.5rem;
  -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse at 70% 20%, #000, transparent 75%);
}
.buying-inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 5rem 1.5rem; }

.two-col {
  display: grid; gap: 1.1rem; margin-top: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.panel { padding-top: .5rem; }
.panel h3 {
  margin-bottom: 1.1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--gold-deep);
  display: inline-block;
}

.ticks, .steps { color: var(--ink-soft); font-size: .99rem; margin: 0; }
.ticks { list-style: none; padding: 0; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .75rem; }
.tick {
  flex: none; color: var(--sky-600); font-weight: 700;
  font-size: .95rem; line-height: 1.65;
}

.steps { padding-left: 1.15rem; }
.steps li { margin-bottom: .8rem; padding-left: .3rem; }
.steps li::marker { color: var(--gold-deep); font-family: var(--font-display); font-weight: 700; }

/* ---------------------------- contacto ---------------------------- */

.contact { max-width: var(--wrap); margin: 0 auto; padding: 5rem 1.5rem 2rem; }

/* tres líneas, sin cajas: la dirección es lo único que importa aquí */
.contact-lines { margin: 2.5rem 0 0; }
.contact-lines > div {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-lines > div:first-child { border-top: 1px solid var(--line); }
.contact-lines dt { margin: 0; }
.contact-lines dt a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.contact-lines dt a:hover { color: var(--sky-700); }
.contact-lines dd { margin: 0; color: var(--ink-dim); font-size: .98rem; }

/* ---------------------------- footer ---------------------------- */

.site-footer {
  max-width: var(--wrap); margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem; border-top: 1px solid var(--line);
  text-align: center; color: var(--ink-soft); font-size: .9rem;
}
.site-footer img { border-radius: 7px; opacity: .95; margin-bottom: .6rem; }
.site-footer p { font-family: var(--font-display); }
.site-footer .fine { font-size: .74rem; max-width: 48ch; margin: .9rem auto 0; line-height: 1.55; color: var(--ink-dim); }

/* ---------------------------- responsive ---------------------------- */

@media (max-width: 54rem) {
  .hero {
    grid-template-columns: 1fr; gap: 1.8rem;
    padding: 1.8rem 1.25rem 3rem;
  }
  .hero-art { order: -1; }
  .tcg-card { width: min(11.5rem, 52%); transform: rotate(-3deg); border-radius: 12px; padding: 6px; }
  .lede { font-size: 1.02rem; }
  .promises, .contact { padding-inline: 1.25rem; }
  .buying-inner { padding: 3.5rem 1.25rem; }

  .promise-list { padding-inline: 1rem; }
  .promise { grid-template-columns: auto minmax(0, 1fr); padding: 1.25rem 0; }
  .promise-no { font-size: .76rem; padding-top: .25rem; }
  .promise-dmg {
    grid-column: 2; text-align: left; margin-top: .55rem;
    font-size: .9rem; display: flex; align-items: baseline; gap: .45rem;
  }
  .promise-dmg small { display: inline; letter-spacing: .12em; }

  /* área táctil: 44px es el mínimo con el que un dedo acierta. Los correos son
     la única vía de contacto de la web, no pueden medir 18px de alto. */
  .site-header nav a { display: flex; align-items: center; min-height: 40px; }
  .contact-lines dt a { display: flex; align-items: center; min-height: 44px; }
}

/* ---- móvil de verdad: que el mensaje entre en la primera pantalla ----
   Antes el menú ocupaba dos filas y la carta se comía 360px de alto, así que
   el titular quedaba por debajo del pliegue. La carta pasa a ser un sello. */
@media (max-width: 30rem) {
  body { font-size: 16px; }

  .site-header { padding: .7rem 1.1rem; flex-wrap: nowrap; gap: .5rem; }
  .brand img { width: 28px; height: 28px; }
  .brand-text b { font-size: .88rem; letter-spacing: .07em; }
  .brand-text i { font-size: .58rem; letter-spacing: .22em; }
  .site-header nav { gap: .95rem; flex: none; }
  .site-header nav a { font-size: .82rem; }

  .h1-top, .h1-holo { font-size: clamp(2.05rem, 10.5vw, 2.6rem); }
  h1 { margin-bottom: 1.1rem; }
  .cta-row { margin: 1.4rem 0 .7rem; gap: .6rem; }
  .btn { padding: .78rem 1.25rem; font-size: .94rem; }
  .cta-row .btn { flex: 1 1 auto; text-align: center; }

  /* la carta se queda arriba, pero como sello: a tamaño grande se comía 360px
     de alto y el titular quedaba por debajo del pliegue en un iPhone SE */
  .hero { gap: 1.2rem; padding-top: 1.1rem; }
  .tcg-card { width: 11rem; padding: 6px; border-radius: 12px; }
  .tcg-inner { padding: .5rem .5rem .4rem; font-size: .66rem; }
  /* a 11rem no cabe el detalle: las filas de ataque partían las palabras en dos
     y aplastaban la ventana holo, que es lo único que hay que ver aquí */
  .tcg-flavor, .tcg-move { display: none; }
  .tcg-name { font-size: 1.15em; }
  .tcg-footer { margin-top: .5rem; }

  .flavor-strip { font-size: .95rem; padding-top: 1.6rem; }
  .promises { padding-top: 3rem; }
  .promise-sheet { padding: 5px; border-radius: 11px; }
  .promise h3 { font-size: 1.1rem; }
  .two-col { gap: 1.8rem; }
  .sheet-footer { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .h1-holo { color: var(--sky-700); }
}