/* Mini Apps · miniapps.pe
   Un tablero perforado pintado del azul del logo. Cada app cuelga de su gancho
   sobre su silueta pintada; los espacios vacíos esperan a las próximas.
   Todo se apoya en el paso de los agujeros (--p). */

:root {
  --p: 32px;              /* paso entre agujeros */
  --hr: 5px;              /* radio de cada agujero */
  --gut: calc(var(--p) * 2);
  --top-h: calc(var(--p) * 3);

  --board: #1f4fe6;       /* pintura del tablero */
  --board-2: #1a45cf;
  --hole: #06124a;        /* fondo del agujero */
  --rim: #5d82f2;         /* pared iluminada del agujero */
  --paint: #f3f4fd;       /* pintura blanca de las siluetas */
  --paint-rim: #c3c8e6;
  --ink: #0b1a5e;         /* azul marino del logo */
  --ink-2: #33407a;
  --navy: #0f2170;        /* tablero azul marino */
  --navy-rim: #2a3c91;
  --lit-1: #ff45c6;       /* la ficha encendida del logo */
  --lit-2: #ff9c3c;
  --lit-rim: #ffc2c9;
  --tag: #ffc629;         /* etiqueta colgante */
  --tag-2: #ffd659;
  --steel-1: #ffffff;
  --steel-2: #c5cbdd;
  --steel-3: #7c86a8;

  --f-paint: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif;
  --f-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sh-plate: 0 .45rem 1rem rgba(3, 10, 58, .34), 0 .1rem .2rem rgba(3, 10, 58, .3);
  --sh-lift: 0 .9rem 1.8rem rgba(3, 10, 58, .36), 0 .2rem .4rem rgba(3, 10, 58, .28);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 720px) {
  :root { --p: 24px; --hr: 4px; --gut: var(--p); --top-h: calc(var(--p) * 3.5); }
}
@media (max-width: 360px) {
  :root { --gut: 16px; }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--p);
  scrollbar-color: var(--ink) var(--board-2);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Agujeros: un círculo oscuro corrido hacia arriba sobre otro más claro deja
   ver la pared iluminada del agujero abajo. Cada superficie cambia sus colores. */
body, .holes, [data-holes] {
  --h-c: var(--hole);
  --r-c: var(--rim);
  background-image:
    radial-gradient(circle at 50% calc(50% - 1.2px), var(--h-c) 0 calc(var(--hr) - 1px), transparent calc(var(--hr) - .3px)),
    radial-gradient(circle at 50% 50%, var(--r-c) 0 calc(var(--hr) - .6px), transparent var(--hr));
  background-size: var(--p) var(--p);
  background-position: var(--ox, 0px) var(--oy, 0px);
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--board);
  color: var(--paint);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Grano de pintura sobre todo, también sobre el 3D. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--tag); color: var(--ink); }
:focus-visible { outline: 3px solid var(--tag); outline-offset: 4px; border-radius: 8px; }

.u-short { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--p); top: -4rem; z-index: 60;
  background: var(--tag); color: var(--ink); font-weight: 800; text-decoration: none;
  padding: .6rem 1rem; border-radius: 10px; box-shadow: var(--sh-plate);
}
.skip:focus { top: var(--p); }

/* ---------- objetos del tablero ---------- */

.screw {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--steel-1) 0 14%, var(--steel-2) 45%, var(--steel-3) 100%);
  box-shadow: 0 1px 1.5px rgba(3, 10, 58, .5), inset 0 -1px 1px rgba(0, 0, 0, .18);
}
.screw::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px; margin-top: -1px;
  border-radius: 1px;
  background: #66709a;
  transform: rotate(var(--rot, 38deg));
}
.screw:nth-of-type(2n) { --rot: -24deg; }

/* Gancho de pared en versión CSS (sin 3D o como adorno). */
.peg {
  position: absolute;
  left: 50%;
  top: calc(var(--s) * .1);
  width: 7px;
  height: calc(var(--p) * .6);
  border-radius: 4px;
  background: linear-gradient(90deg, #6f7aa0, var(--steel-1) 38%, var(--steel-2) 62%, #6f7aa0);
  box-shadow: 4px 8px 5px rgba(3, 10, 58, .36);
  transform: translate(-50%, -100%);
}
.peg::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--steel-1) 0 12%, var(--steel-2) 42%, var(--steel-3) 100%);
  box-shadow: 2px 4px 4px rgba(3, 10, 58, .35);
}

.paint {
  font-family: var(--f-paint);
  font-optical-sizing: auto;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .9;
  color: var(--paint);
  text-wrap: balance;
}
.paint--h1 { font-size: clamp(3.4rem, 1.2rem + 5.8vw, 6rem); }
.paint--h2 { font-size: clamp(2.4rem, 1.1rem + 3.4vw, 4.4rem); }
.paint__hi { color: var(--tag); }
.paint__line { display: block; }

.plate {
  border-radius: 14px;
  padding: calc(var(--p) * .5) calc(var(--p) * .7);
  box-shadow: var(--sh-plate);
}
.plate--navy { background: var(--ink); color: #e8ebff; }
.plate--paint { background: var(--paint); color: var(--ink); }
.plate--ink { background: var(--board); color: #fff; }
.plate--small { font-size: .875rem; line-height: 1.4; padding: .5rem .8rem; border-radius: 10px; text-wrap: balance; }

/* Placa montada: dos tornillos a los lados. */
.mount { position: relative; padding-left: 2.1rem; padding-right: 2.1rem; }
.mount::before,
.mount::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  box-shadow: 0 1px 1.5px rgba(3, 10, 58, .5);
}
.mount::before {
  left: .7rem;
  background:
    linear-gradient(38deg, transparent 43%, #66709a 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 30%, var(--steel-1) 0 14%, var(--steel-2) 45%, var(--steel-3) 100%);
}
.mount::after {
  right: .7rem;
  background:
    linear-gradient(-24deg, transparent 43%, #66709a 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 30%, var(--steel-1) 0 14%, var(--steel-2) 45%, var(--steel-3) 100%);
}
.plate--small.mount { padding-left: 1.9rem; padding-right: 1.9rem; }
.plate--small.mount::before { left: .55rem; }
.plate--small.mount::after { right: .55rem; }

/* La pintura de los titulares deja ver los agujeros del tablero. */
@media (min-width: 721px) {
  .paint[data-holes] {
    --h-c: var(--hole);
    --r-c: var(--paint-rim);
    --ink-c: var(--paint);
    color: transparent;
    background-image:
      radial-gradient(circle at 50% calc(50% - 1.2px), var(--h-c) 0 calc(var(--hr) - 1px), transparent calc(var(--hr) - .3px)),
      radial-gradient(circle at 50% 50%, var(--r-c) 0 calc(var(--hr) - .6px), transparent var(--hr)),
      linear-gradient(var(--ink-c), var(--ink-c));
    background-size: var(--p) var(--p), var(--p) var(--p), 100% 100%;
    background-position: var(--ox, 0px) var(--oy, 0px), var(--ox, 0px) var(--oy, 0px), 0 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .paint__hi[data-holes] { --ink-c: var(--tag); --r-c: #e0a514; }
}

/* Etiqueta colgante: el botón del tablero. */
.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  background: var(--tag);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.3;
  border-radius: 12px;
  box-shadow: var(--sh-plate);
  transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.tag:hover { background: var(--tag-2); box-shadow: var(--sh-lift); }
.tag:focus-visible { outline-color: var(--paint); outline-offset: 5px; }
.tag__eyelet {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--board);
  box-shadow: 0 0 0 3px #e2e6f3, inset 1px 2px 2px rgba(3, 10, 58, .55);
}
.tag svg { flex: none; transition: transform .3s var(--ease-out); }
.tag:hover svg { transform: translateX(3px); }

.tag--inline { padding: .9rem 1.2rem .9rem 2.9rem; font-size: 1.05rem; }
.tag--inline .tag__eyelet { left: 1rem; top: 50%; margin-top: -7px; }

.tag--hang {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--s) * 1.07);
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  min-width: 10.5rem;
  padding: 1.75rem 1.15rem .85rem;
  transform-origin: 50% calc(var(--s) * -.16);
  transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, 0px)) rotate(var(--rot, -3deg));
}
.tag--hang::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - 1.05rem);
  width: 2px;
  height: calc(var(--s) * .16 + 1rem);
  margin-left: -1px;
  border-radius: 1px;
  background: #e8ebff;
  box-shadow: 1px 2px 2px rgba(3, 10, 58, .35);
}
.tag--hang .tag__eyelet { left: 50%; top: .6rem; margin-left: -7px; }
.tag__name { font-size: 1.15rem; }
.tag__go { display: inline-flex; align-items: center; gap: .3rem; font-size: .95rem; font-weight: 800; }

/* ---------- cabecera ---------- */

.top {
  position: relative;
  z-index: 4;
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p);
  padding: 0 var(--gut);
}
.nameplate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh-plate);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.nameplate img { height: clamp(40px, 1.6rem + 1.6vw, 58px); width: auto; }
.nameplate:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); }

.top__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.label-plate {
  display: inline-block;
  padding: .55rem .95rem;
  border-radius: 10px;
  background: var(--ink);
  color: #e8ebff;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--sh-plate);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s var(--ease-out);
}
.label-plate:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); background: #13247a; }

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

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--p) * 2);
  min-height: max(36rem, calc(100svh - var(--top-h)));
  padding: var(--p) var(--gut) calc(var(--p) * 2.5);
}
.hero__copy { position: relative; z-index: 2; max-width: 38rem; }
.hero__copy .paint--h1 { margin-bottom: var(--p); }
.hero__lead { max-width: 31rem; font-size: 1.15rem; line-height: 1.55; font-weight: 600; }

.hero__3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rack {
  --s: calc(var(--p) * 6);
  position: relative;
  z-index: 0;
  margin-right: calc(var(--p) * .5);
  padding-bottom: calc(var(--s) * .62);
}
.rack__grid {
  display: grid;
  grid-template-columns: repeat(2, var(--s));
  grid-auto-rows: var(--s);
  gap: var(--p);
}
@media (min-width: 1180px) and (min-height: 780px) { .rack { --s: calc(var(--p) * 7); } }
@media (min-width: 1560px) and (min-height: 960px) { .rack { --s: calc(var(--p) * 8); } }

.slot {
  position: relative;
  border-radius: calc(var(--s) * .22);
  background-color: var(--paint);
  --h-c: var(--hole);
  --r-c: var(--paint-rim);
  transition: opacity .45s var(--ease-out), filter .45s var(--ease-out);
}
.slot--empty:nth-child(2) { grid-area: 1 / 1; }
.slot--empty:nth-child(3) { grid-area: 1 / 2; }
.slot--empty:nth-child(4) { grid-area: 2 / 1; }
.slot--live {
  grid-area: 2 / 2;
  z-index: 2;
  --r-c: var(--lit-rim);
  background-image:
    radial-gradient(circle at 50% calc(50% - 1.2px), var(--h-c) 0 calc(var(--hr) - 1px), transparent calc(var(--hr) - .3px)),
    radial-gradient(circle at 50% 50%, var(--r-c) 0 calc(var(--hr) - .6px), transparent var(--hr)),
    linear-gradient(135deg, var(--lit-1), var(--lit-2));
  background-size: var(--p) var(--p), var(--p) var(--p), 100% 100%;
  background-position: var(--ox, 0px) var(--oy, 0px), var(--ox, 0px) var(--oy, 0px), 0 0;
}
.slot__label {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s) * .12);
  transform: translateX(-50%);
  width: max-content;
  max-width: 88%;
  text-align: center;
  line-height: 1.3;
  padding: .28rem .5rem;
  border-radius: 7px;
  background: var(--ink);
  color: #e8ebff;
  font-size: max(.6875rem, calc(var(--s) * .062));
  font-weight: 800;
  box-shadow: 0 .2rem .4rem rgba(3, 10, 58, .3);
}
/* Enfocar la app colgada apaga el resto del tablero. */
.rack:has(.slot--live:hover, .tag--hang:focus-visible) .slot--empty { opacity: .42; filter: saturate(.6); }

/* Herramienta en CSS (sin WebGL o con movimiento reducido). */
.tool {
  position: absolute;
  left: 50%;
  top: calc(var(--s) * .13);
  width: calc(var(--s) * .66);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tool__tab {
  position: relative;
  width: 42%;
  height: calc(var(--s) * .12);
  border-radius: calc(var(--s) * .05) calc(var(--s) * .05) 0 0;
  background: #fff;
}
.tool__tab::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: calc(var(--s) * .056);
  height: calc(var(--s) * .056);
  border-radius: 50%;
  background: var(--lit-1);
  transform: translate(-50%, -50%);
}
.tool__face {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: #fff;
  box-shadow: 0 1rem 1.6rem rgba(70, 8, 50, .35);
}
.tool__face img { width: 70%; height: auto; }

.spark {
  position: absolute;
  z-index: 3;
  top: calc(var(--s) * -.3);
  left: calc(var(--s) * 1.62 + var(--p));
  width: calc(var(--s) * .62);
  height: auto;
  filter: drop-shadow(3px 8px 6px rgba(3, 10, 58, .35));
}

html.has-3d .tool,
html.has-3d .slot .peg,
html.has-3d .spark { visibility: hidden; }

/* ---------- secciones ---------- */

.section { position: relative; padding: calc(var(--p) * 3) var(--gut); }
.apps { padding-top: calc(var(--p) * 3.5); }


.apps .paint--h2 { max-width: 16ch; }
.apps__body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: start;
  gap: calc(var(--p) * 2);
  margin-top: calc(var(--p) * 1.5);
}

.ficha {
  position: relative;
  max-width: 46rem;
  padding: calc(var(--p) * 1.75) calc(var(--p) * 1.5) calc(var(--p) * 1.5);
  border-radius: 22px;
  background: var(--paint);
  color: var(--ink);
  box-shadow: var(--sh-lift);
}
.ficha__hole {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--board);
  box-shadow: inset 1px 3px 4px rgba(3, 10, 58, .55);
}
.ficha__hole::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--steel-1) 0 12%, var(--steel-2) 42%, var(--steel-3) 100%);
  box-shadow: 2px 4px 4px rgba(3, 10, 58, .4);
}
.ficha__logo img { width: min(15rem, 70%); height: auto; }
.ficha__pitch {
  margin-top: calc(var(--p) * .6);
  max-width: 34ch;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
  line-height: 1.35;
  font-weight: 800;
}
.ficha__list { margin: calc(var(--p) * 1) 0 calc(var(--p) * 1.25); }
.ficha__list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: .85rem 0;
  border-top: 2px dashed #d3d8f1;
}
.ficha__list li:first-child { border-top: 0; }
.ficha__list svg {
  width: 2.6rem;
  height: 2.6rem;
  padding: .5rem;
  border-radius: 12px;
  background: #e2e8ff;
  fill: none;
  stroke: #1852bb;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ficha__list p { max-width: 60ch; color: var(--ink-2); line-height: 1.5; }
.ficha__list strong { display: block; color: var(--ink); font-weight: 900; font-size: 1.08rem; }

.phone {
  position: relative;
  justify-self: center;
  width: min(100%, 19rem);
  padding-top: calc(var(--p) * .5);
}
.phone img {
  width: 100%;
  height: auto;
  border: 10px solid #0a1236;
  border-radius: 40px;
  background: #0a1236;
  box-shadow: var(--sh-lift), 0 2.4rem 3rem rgba(3, 10, 58, .25);
  transform: rotate(2.5deg);
}
.phone__clip {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 5.5rem;
  height: 1.6rem;
  margin-left: -2.75rem;
  border-radius: 8px;
  background: linear-gradient(var(--steel-1), var(--steel-2) 45%, var(--steel-3));
  box-shadow: 0 .3rem .5rem rgba(3, 10, 58, .4);
}
.phone figcaption { margin: calc(var(--p) * .9) auto 0; width: fit-content; max-width: 100%; text-align: center; }

/* El mismo tablero, pintado de azul marino de borde a borde. */
.rules-wrap { padding: 0; }
.panel {
  position: relative;
  --h-c: #030a35;
  --r-c: var(--navy-rim);
  background-color: var(--navy);
  padding: calc(var(--p) * 3) var(--gut);
}
.panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: end;
  gap: calc(var(--p) * 1.5);
}
.panel__intro { font-weight: 700; line-height: 1.5; }
.rules { margin-top: calc(var(--p) * 2); display: grid; gap: var(--p); }
.rule {
  display: grid;
  grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--p) * 1);
}
.rule dt { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4rem); }
.rule dd {
  justify-self: start;
  max-width: 34rem;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.45;
  border-radius: 12px;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.panel__note {
  margin-top: calc(var(--p) * 2);
  max-width: 44rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
  font-weight: 700;
}

.close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--p) * 2);
  padding-bottom: calc(var(--p) * 4);
}
.close__copy { order: -1; max-width: 36rem; }
.close__copy .paint--h2 { max-width: 12ch; }
.close__copy .plate { margin: var(--p) 0 calc(var(--p) * 1.25); max-width: 30rem; font-weight: 600; }
.close__row { display: flex; gap: var(--p); }
.ghost {
  --s: calc(var(--p) * 5);
  --h-c: var(--hole);
  --r-c: var(--paint-rim);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) * .22);
  background-color: var(--paint);
}
.ghost .peg { top: calc(var(--s) * .2); }

.foot {
  --h-c: #030a35;
  --r-c: var(--navy-rim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p);
  padding: var(--p) var(--gut);
  background-color: var(--ink);
  color: #c9cff2;
  font-size: .95rem;
}
.foot p,
.foot nav a { padding: .35rem .7rem; border-radius: 8px; background: var(--ink); }
.foot__brand { padding: 6px 10px; border-radius: 10px; background: #fff; }
.foot__brand img { height: 34px; width: auto; }
.foot p { margin-right: auto; }
.foot a { font-weight: 800; color: #fff; text-underline-offset: .2em; }

/* ---------- pantallas medianas y chicas ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--p) * 1.5); align-content: start; padding-top: calc(var(--p) * 1.5); }
  .rack { justify-self: center; margin: calc(var(--p) * .5) 0 0; }
  .apps__body { grid-template-columns: minmax(0, 1fr); }
  .phone { width: min(80%, 17rem); }
  .panel__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .close { grid-template-columns: minmax(0, 1fr); }
  .close__row { order: 2; }
}

@media (max-width: 720px) {
  .top { gap: 8px; }
  .top__nav { gap: 8px; flex-wrap: nowrap; }
  .slot__more { display: none; }
  .u-long { display: none; }
  .u-short { display: inline; }
  .label-plate { font-size: .875rem; padding: .5rem .75rem; }
  .hero { min-height: 0; row-gap: var(--p); padding-top: calc(var(--p) * .5); padding-bottom: calc(var(--p) * 1.5); }
  .hero__lead { font-size: 1.05rem; }
  .paint--h1 { font-size: clamp(2.9rem, 1.6rem + 6vw, 3.6rem); }
  .rack { --s: calc(var(--p) * 5.5); margin-right: 0; }
  .tag--hang { min-width: 9.5rem; padding: 1.6rem .95rem .75rem; }
  .tag__name { font-size: 1.05rem; }
  .section { padding-top: calc(var(--p) * 3); padding-bottom: calc(var(--p) * 3); }
  .ficha { padding: calc(var(--p) * 2) var(--p) var(--p); }
  .panel { padding: calc(var(--p) * 2.5) var(--gut); }
  .rule { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .ghost { --s: calc(var(--p) * 3); }
  .tag--inline { font-size: 1rem; }
}

@media (max-width: 380px), (max-width: 720px) and (max-height: 760px) {
  .rack { --s: calc(var(--p) * 5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}