/* Portadas de ejemplo · Tu Negocio MX */

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

:root {
  --pad: clamp(20px, 3.6vw, 72px);
  --arriba: clamp(54px, 6.4vh, 76px);   /* franja de la galería */
  --abajo: clamp(88px, 11vh, 112px);    /* controles de abajo */
  --mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sans: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --ui: #fff;
  --ui-suave: rgba(255, 255, 255, .64);
  --ui-linea: rgba(255, 255, 255, .26);
  --ui-inverso: #0b0b0b;
  --ui-acento: #ffc21a;
  color-scheme: dark;
}
html[data-claro="si"] {
  --ui: #0d0d0d;
  --ui-suave: rgba(13, 13, 13, .62);
  --ui-linea: rgba(13, 13, 13, .24);
  --ui-inverso: #fff;
}

html, body { margin: 0; height: 100%; }
body {
  background: #0b0b0b;
  color: #fff;
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ui-acento); outline-offset: 3px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sin-js { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 14px var(--mono); }

/* ───────── Franja superior de la galería ───────── */
.barra {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  height: var(--arriba);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: env(safe-area-inset-top) var(--pad) 0;
  pointer-events: none;
}
.barra > * { pointer-events: auto; }
.barra-titulo {
  margin: 0; font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ui-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-marca { color: var(--ui); font-weight: 700; }
.boton-todas {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 0 14px;
  font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ui); background: transparent; border: 1px solid var(--ui-linea); border-radius: 0;
  cursor: pointer;
}
.boton-todas svg { width: 12px; height: 12px; fill: currentColor; }
.boton-todas:hover { background: var(--ui); color: var(--ui-inverso); border-color: var(--ui); }

/* ───────── Carrusel ───────── */
.carrusel { position: fixed; inset: 0; overflow: hidden; background: #0b0b0b; }

.portada {
  --fondo: #0b0b0b; --tinta: #fff; --tinta-suave: rgba(255, 255, 255, .74); --sombra: 8, 8, 8;
  --acento: #ffc21a; --sobre-acento: #0b0b0b;
  --display: 'Anton'; --peso: 400; --ancho: 100%; --tracking: .002em;
  --fs: min(9.2vw, 17.5vh);
  --pos: 50% 50%; --pos-m: 50% 50%; --origen: 50% 50%;
  position: absolute; inset: 0; overflow: hidden;
  background: var(--fondo); color: var(--tinta);
  opacity: 0; visibility: hidden; z-index: 0;
}
/* la que sale se queda debajo, completa, hasta que la nueva termina de aparecer (app.js quita .previa) */
.portada.previa { opacity: 1; visibility: visible; z-index: 1; }
.portada.activa {
  opacity: 1; visibility: visible; z-index: 2;
  transition: opacity .45s cubic-bezier(.33, 0, .2, 1);
  will-change: opacity;
}

/* Foto + zoom lento */
.foto {
  position: absolute; inset: 0;
  transform: scale(1.001); transform-origin: var(--origen);
}
.activa .foto, .previa .foto {
  transform: scale(1.085);
  transition: transform 14s cubic-bezier(.25, .1, .3, 1);
  will-change: transform;
}
.foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos);
  opacity: 0; transition: opacity .45s ease;
}
.foto img.lista { opacity: 1; }
.espejo .foto img { transform: scaleX(-1); }

/* Velo para que se lea el texto */
.velo { position: absolute; inset: 0; pointer-events: none; }
.izq .velo {
  background:
    linear-gradient(90deg, rgba(var(--sombra), .9) 0%, rgba(var(--sombra), .7) 30%, rgba(var(--sombra), .18) 62%, rgba(var(--sombra), 0) 82%),
    linear-gradient(180deg, rgba(var(--sombra), .6) 0%, rgba(var(--sombra), 0) 24%, rgba(var(--sombra), 0) 72%, rgba(var(--sombra), .65) 100%);
}
.abajo .velo {
  background:
    linear-gradient(0deg, rgba(var(--sombra), .94) 0%, rgba(var(--sombra), .72) 30%, rgba(var(--sombra), .2) 58%, rgba(var(--sombra), 0) 76%),
    linear-gradient(180deg, rgba(var(--sombra), .62) 0%, rgba(var(--sombra), 0) 26%);
}
.centro .velo {
  background:
    linear-gradient(0deg, rgba(var(--sombra), .95) 0%, rgba(var(--sombra), .8) 32%, rgba(var(--sombra), .3) 60%, rgba(var(--sombra), .1) 100%),
    linear-gradient(180deg, rgba(var(--sombra), .6) 0%, rgba(var(--sombra), 0) 28%);
}

/* Cuadrícula y marco finos */
.cuadricula {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--rejilla, .1);
  background-image:
    linear-gradient(to right, var(--tinta) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tinta) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--pad)) / 6) 100%, 100% 25%;
  background-position: var(--pad) 0, 0 0;
}
.marco-fino {
  position: absolute; pointer-events: none;
  inset: calc(var(--arriba) - 2px) calc(var(--pad) * .45) calc(var(--abajo) - 10px);
  border: 1px solid var(--acento); opacity: .42;
}
.marco-fino::before, .marco-fino::after {
  content: ""; position: absolute; width: 7px; height: 7px; background: var(--acento);
}
.marco-fino::before { top: -4px; left: -4px; }
.marco-fino::after { bottom: -4px; right: -4px; }

/* Cabecera del negocio */
.cabecera {
  position: absolute; z-index: 3;
  top: calc(var(--arriba) + 16px); left: var(--pad); right: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marca {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font: 800 15px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta);
}
.marca-punto {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--punto, var(--acento));
}
.nav-falsa {
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px);
  margin: 0; padding: 0; list-style: none;
  font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--tinta-suave);
}
.nav-boton {
  padding: 10px 14px; border: 1px solid currentColor; color: var(--tinta);
  font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .1em;
}
.menu-falso { display: none; width: 26px; height: 12px; position: relative; }
.menu-falso i { position: absolute; left: 0; right: 0; height: 2px; background: var(--tinta); }
.menu-falso i:first-child { top: 0; }
.menu-falso i:last-child { bottom: 0; left: 8px; }

/* Contenido */
.contenido { position: absolute; z-index: 3; }
.izq .contenido {
  left: var(--pad); right: var(--pad);
  top: calc(var(--arriba) + 64px); bottom: calc(var(--abajo) + 12px);
  display: flex; flex-direction: column; justify-content: center;
}
.izq .contenido > * { max-width: 62vw; }
.abajo .contenido {
  left: var(--pad); right: var(--pad); bottom: calc(var(--abajo) + 18px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  column-gap: clamp(28px, 4vw, 80px); align-items: end;
}
.centro .contenido {
  left: var(--pad); right: var(--pad); bottom: calc(var(--abajo) + 14px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.centro .meta { justify-content: center; }
.centro .acciones { justify-content: center; }
.centro .sub { margin-left: auto; margin-right: auto; }

.meta {
  display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 2.4vh, 28px);
  font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
}
.circulo {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid currentColor; border-radius: 50%;
  font-weight: 700; font-size: 10.5px; letter-spacing: 0; color: var(--tinta);
}

.titulo {
  margin: 0;
  font-family: var(--display), 'Arial Narrow', Impact, sans-serif;
  font-weight: var(--peso); font-stretch: var(--ancho);
  font-size: var(--fs); line-height: .86; letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.linea { display: block; overflow: hidden; padding: .1em 0 .05em; margin: -.1em 0 -.05em; }
.linea > span { display: block; transform: translateY(104%); transition: transform .35s ease; }
.activa .linea > span { transform: none; transition: transform 1.15s var(--curva) calc(.32s + var(--k) * .1s); }
.l1 { color: var(--tinta); }
.l2 { color: var(--acento); }
.punto-final { color: var(--punto, var(--acento)); }

.sub {
  margin: clamp(16px, 2.6vh, 30px) 0 0; max-width: 52ch;
  font: 400 clamp(15px, 1.15vw, 20px)/1.5 var(--sans); color: var(--tinta-suave);
}
.abajo .sub { margin-top: 0; }
.acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: clamp(18px, 3vh, 34px);
}
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 22px;
  background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: 0;
  font: 700 13.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.ico-sale { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .35s var(--curva); }
.cta:hover .ico-sale { transform: translate(3px, -3px); }
.cta:focus-visible, .quiero:focus-visible { outline-color: var(--tinta); }
.quiero {
  display: inline-block; padding: 12px 0;
  font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); text-decoration: underline; text-decoration-color: var(--acento);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.quiero:hover { color: var(--tinta); }

/* Entrada escalonada (solo opacity y transform) */
.anim { opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; }
.activa .anim {
  opacity: 1; transform: none;
  transition: opacity .8s ease calc(.4s + var(--i) * .09s), transform 1.1s var(--curva) calc(.4s + var(--i) * .09s);
}

/* Línea FOTO / DIRECCIÓN / CÓDIGO */
.codigo {
  position: absolute; z-index: 3; margin: 0;
  right: calc(var(--pad) * .45 + 14px); top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%);
  font: 400 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); opacity: .7; white-space: nowrap;
}
@media (max-width: 1200px), (max-height: 760px) { .codigo { display: none; } }

/* Sello giratorio */
.sello {
  position: absolute; z-index: 3; width: clamp(96px, 8vw, 132px); aspect-ratio: 1;
  display: grid; place-items: center; color: var(--tinta);
}
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 26s linear infinite; animation-play-state: paused; }
.activa .sello svg { animation-play-state: running; }
.sello text { font: 700 10.5px var(--mono); fill: currentColor; }
.sello-centro {
  display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); font: 700 13px var(--mono);
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Valores base de las miniaturas (cada portada los cambia abajo) */
.mini {
  --fondo: #0b0b0b; --tinta: #fff; --sombra: 8, 8, 8; --acento: #ffc21a;
  --display: 'Anton'; --peso: 400; --ancho: 100%; --pos: 50% 50%;
}

/* ───────── Cada portada ───────── */
[data-p="01"] {
  --fondo: #0a0807; --sombra: 10, 8, 7; --acento: #ffc21a; --punto: #ff3b1f; --sobre-acento: #140d00;
  --pos: 50% 55%; --pos-m: 36% 50%; --origen: 64% 58%;
}
[data-p="02"] {
  --fondo: #0d0a08; --sombra: 12, 9, 7; --acento: #ff6a1a; --sobre-acento: #160800;
  --display: 'Archivo'; --peso: 900; --ancho: 62%; --tracking: -.01em;
  --fs: min(11.6vw, 21vh);
  --pos: 50% 30%; --pos-m: 52% 40%; --origen: 50% 30%; --rejilla: .08;
}
[data-p="03"] {
  --fondo: #151515; --sombra: 20, 20, 20; --tinta: #f6f2ea; --tinta-suave: rgba(246, 242, 234, .72);
  --acento: #cfa75e; --sobre-acento: #151515;
  --pos: 50% 30%; --pos-m: 74% 30%; --origen: 75% 25%; --rejilla: .07;
}
/* 01 y 03: fotos muy oscuras; se aclaran y el velo baja un poco */
[data-p="01"] .foto img, [data-p="03"] .foto img,
.mini[data-p="01"] .mini-foto img, .mini[data-p="03"] .mini-foto img { filter: brightness(1.4) saturate(1.05); }
[data-p="01"] .velo, [data-p="03"] .velo { opacity: .8; }
[data-p="04"] {
  --fondo: #140806; --sombra: 20, 8, 6; --acento: #ffc83a; --punto: #e3262f; --sobre-acento: #fff;
  --display: 'Archivo'; --peso: 900; --ancho: 62%; --tracking: -.005em;
  --fs: min(10.4vw, 19vh);
  --pos: 50% 40%; --pos-m: 46% 50%; --origen: 50% 40%;
}
[data-p="04"] .cta { background: #e3262f; }
[data-p="04"] .sello { right: calc(var(--pad) + 8px); top: calc(var(--arriba) + 84px); }
[data-p="05"] {
  --fondo: #040607; --sombra: 4, 6, 8; --acento: #b6ff2e; --sobre-acento: #050505;
  --tracking: .01em; --fs: min(9vw, 17vh);
  --pos: 50% 50%; --pos-m: 58% 50%; --origen: 70% 60%; --rejilla: .08;
}
[data-p="06"] {
  --fondo: #efede8; --sombra: 239, 237, 232; --tinta: #0d0d0d; --tinta-suave: rgba(13, 13, 13, .7);
  --acento: #e5121b; --sobre-acento: #fff;
  --fs: min(9.6vw, 18vh);
  --pos: 32% 50%; --pos-m: 38% 40%; --origen: 40% 50%; --rejilla: .06;
}
[data-p="07"] {
  --fondo: #fbfbfb; --sombra: 251, 251, 251; --tinta: #0b1a33; --tinta-suave: rgba(11, 26, 51, .7);
  --acento: #1f5bff; --sobre-acento: #fff;
  --display: 'Archivo'; --peso: 900; --ancho: 62%; --tracking: -.005em;
  --fs: min(11.8vw, 21vh);
  --pos: 50% 50%; --pos-m: 64% 50%; --origen: 80% 50%;
}
[data-p="08"] {
  --fondo: #1b1c1f; --sombra: 24, 25, 28; --acento: #ff2e2e; --sobre-acento: #fff;
  --fs: min(8.4vw, 16vh);
  --pos: 50% 50%; --pos-m: 56% 50%; --origen: 55% 50%; --rejilla: .08;
}

/* 06: dividida, papel a la izquierda y foto a la derecha */
.dividido .foto { left: 44%; }
.dividido .velo {
  left: 44%;
  background:
    linear-gradient(180deg, rgba(var(--sombra), .5) 0%, rgba(var(--sombra), 0) 18%),
    linear-gradient(0deg, rgba(var(--sombra), .97) 0%, rgba(var(--sombra), .75) 9%, rgba(var(--sombra), 0) 24%);
}
.dividido .codigo { display: none; }
.dividido .contenido {
  left: var(--pad); width: calc(44% - var(--pad) - 40px);
  top: calc(var(--arriba) + 64px); bottom: calc(var(--abajo) + 12px);
  display: flex; flex-direction: column; justify-content: center;
}
.dividido .sello { right: calc(var(--pad) + 8px); bottom: calc(var(--abajo) + 28px); }

/* 07: foto recorrida a la derecha sobre fondo blanco */
[data-p="07"] .foto { left: 16%; }
[data-p="07"] .velo {
  background:
    linear-gradient(90deg, rgba(var(--sombra), 1) 0%, rgba(var(--sombra), .9) 34%, rgba(var(--sombra), .2) 54%, rgba(var(--sombra), 0) 66%);
}

/* ───────── Controles de abajo ───────── */
.pie {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  height: var(--abajo);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--pad) env(safe-area-inset-bottom);
  pointer-events: none;
}
.pie > * { pointer-events: auto; }
.etiqueta {
  justify-self: start; display: flex; align-items: center; gap: 10px; margin: 0;
  font: 700 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ui);
}
.etiqueta-punto { flex: none; width: 8px; height: 8px; background: var(--ui-acento); }
.etiqueta.cambia { animation: etiqueta .7s var(--curva); }
@keyframes etiqueta { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.letra-chica {
  margin: 0; justify-self: center; text-align: center;
  font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-suave);
}
.control { justify-self: end; display: flex; align-items: center; gap: 8px; }
.contador {
  margin: 0 12px 0 0; font: 400 12px/1 var(--mono); letter-spacing: .12em; color: var(--ui-suave);
  font-variant-numeric: tabular-nums;
}
#actual { color: var(--ui); font-weight: 700; }
.flecha {
  display: grid; place-items: center; width: 50px; height: 50px; padding: 0;
  background: transparent; color: var(--ui); border: 1px solid var(--ui-linea); border-radius: 0;
  cursor: pointer;
}
.flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.flecha:hover { background: var(--ui); color: var(--ui-inverso); border-color: var(--ui); }

/* Aviso del botón de ejemplo */
.aviso {
  position: fixed; z-index: 40; left: 50%; bottom: calc(var(--abajo) + 8px);
  max-width: min(92vw, 440px); margin: 0; padding: 14px 18px;
  background: var(--ui); color: var(--ui-inverso);
  font: 400 12px/1.45 var(--mono); letter-spacing: .02em;
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity .3s ease, transform .4s var(--curva);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* ───────── Ver todas ───────── */
.todas {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(18px, 4vw, 64px); border: 0;
  background: #0c0c0d; color: #fff; overflow-y: auto; overscroll-behavior: contain;
}
.todas::backdrop { background: #000; }
.todas[open] { animation: abre .45s var(--curva); }
@keyframes abre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.todas-cabeza { display: flex; align-items: end; flex-wrap: wrap; gap: 8px 28px; margin-bottom: clamp(20px, 3.4vw, 40px); }
.todas-cabeza h2 { margin: 0; font: 400 clamp(40px, 5vw, 76px)/.9 'Anton', Impact, sans-serif; text-transform: uppercase; }
.todas-cabeza p { margin: 0 0 6px; font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cerrar {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: 0; color: #fff;
  font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cerrar:hover { background: #fff; color: #0b0b0b; }
.todas :focus-visible { outline-color: #fff; }

.rejilla-todas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px);
}
.mini { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.mini-foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo); color: var(--tinta); }
.mini-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); transition: transform .8s var(--curva); }
.mini[data-estilo~="espejo"] .mini-foto img { transform: scaleX(-1); }
.mini:hover .mini-foto img { transform: scale(1.05); }
.mini[data-estilo~="espejo"]:hover .mini-foto img { transform: scale(-1.05, 1.05); }
.mini[data-estilo~="dividido"] .mini-foto img { position: absolute; left: 44%; width: 56%; top: 0; }
.mini-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--sombra), .92) 0%, rgba(var(--sombra), .5) 45%, rgba(var(--sombra), 0) 75%);
}
.mini[data-estilo~="izq"] .mini-foto::after { background: linear-gradient(90deg, rgba(var(--sombra), .92) 0%, rgba(var(--sombra), .55) 45%, rgba(var(--sombra), 0) 80%); }
.mini[data-estilo~="dividido"] .mini-foto::after { display: none; }
.mini-texto {
  position: absolute; z-index: 1; inset: 12px 14px 14px; display: flex; flex-direction: column; justify-content: space-between;
}
.mini[data-estilo~="centro"] .mini-texto { align-items: center; text-align: center; }
.mini-marca { display: flex; align-items: center; gap: 7px; font: 800 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.mini-marca .marca-punto { width: 7px; height: 7px; }
.mini-titulo {
  font-family: var(--display), Impact, sans-serif; font-weight: var(--peso); font-stretch: var(--ancho);
  font-size: clamp(20px, 2vw, 34px); line-height: .88; text-transform: uppercase;
}
.mini-titulo .linea { overflow: visible; padding: 0; margin: 0; }
.mini-titulo .linea > span { transform: none; }
.mini-pie {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
  font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.mini-pie span:last-child { color: #fff; }
.mini[aria-current="true"] .mini-foto { outline: 2px solid var(--acento); outline-offset: 4px; }
.todas-creditos {
  margin: clamp(24px, 4vw, 48px) 0 0; max-width: 90ch;
  font: 400 11px/1.7 var(--mono); letter-spacing: .04em; color: rgba(255, 255, 255, .55);
}
.todas-creditos a { color: rgba(255, 255, 255, .85); }

/* ───────── Pantallas grandes (2K, 4K) ───────── */
@media (min-width: 1900px) and (min-height: 1000px) {
  :root { --arriba: 92px; --abajo: 132px; }
  .barra-titulo, .boton-todas { font-size: 13px; }
  .boton-todas { min-height: 46px; padding: 0 18px; }
  .marca { font-size: 19px; gap: 12px; }
  .marca-punto { width: 12px; height: 12px; }
  .nav-falsa { font-size: 16px; }
  .nav-boton { font-size: 13px; padding: 12px 18px; }
  .meta { font-size: 13.5px; }
  .circulo { width: 40px; height: 40px; font-size: 12.5px; }
  .sub { font-size: 24px; }
  .cta { min-height: 66px; padding: 0 30px; font-size: 16.5px; gap: 18px; }
  .ico-sale { width: 20px; height: 20px; }
  .quiero { font-size: 13.5px; }
  .abajo .contenido { grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); }
  .codigo { font-size: 11.5px; }
  .etiqueta { font-size: 13px; }
  .etiqueta-punto { width: 10px; height: 10px; }
  .letra-chica { font-size: 12px; }
  .contador { font-size: 15px; }
  .flecha { width: 62px; height: 62px; }
  .flecha svg { width: 24px; height: 24px; }
  .aviso { font-size: 15px; max-width: 560px; }
}

/* ───────── Pantallas medianas ───────── */
@media (max-width: 1100px) {
  .rejilla-todas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-falsa li:not(.nav-boton) { display: none; }
  .pie { grid-template-columns: 1fr auto; }
  .letra-chica { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
  .etiqueta { grid-column: 1; grid-row: 1; }
  .control { grid-column: 2; grid-row: 1 / span 2; }
}

/* ───────── Celular ───────── */
@media (max-width: 760px) {
  :root { --pad: 18px; --arriba: 52px; --abajo: 104px; }
  .barra-titulo { font-size: 9.5px; letter-spacing: .03em; }
  .boton-todas { min-height: 34px; padding: 0 11px; font-size: 10px; }

  .portada { --fs: min(var(--fs-m, 17vw), 10.5vh); }
  [data-p="01"] { --fs-m: 15.6vw; }
  [data-p="02"] { --fs-m: 21vw; }
  [data-p="04"] { --fs-m: 18.5vw; }
  [data-p="05"] { --fs-m: 15.4vw; }
  [data-p="07"] { --fs-m: 22vw; }
  [data-p="08"] { --fs-m: 16.4vw; }

  .foto img { object-position: var(--pos-m); }
  [data-p="07"] .foto { left: 0; }

  .cabecera { top: calc(var(--arriba) + 8px); }
  .marca { font-size: 13px; }
  .nav-falsa { display: none; }
  .menu-falso { display: block; }

  .izq .velo, .abajo .velo, .centro .velo, [data-p="07"] .velo {
    background:
      linear-gradient(0deg, rgba(var(--sombra), .96) 0%, rgba(var(--sombra), .86) 34%, rgba(var(--sombra), .3) 60%, rgba(var(--sombra), 0) 76%),
      linear-gradient(180deg, rgba(var(--sombra), .7) 0%, rgba(var(--sombra), 0) 22%);
  }

  .izq .contenido, .abajo .contenido, .centro .contenido, .dividido .contenido {
    top: auto; left: var(--pad); right: var(--pad); width: auto;
    bottom: calc(var(--abajo) + 6px);
    display: block;
  }
  .izq .contenido > * { max-width: none; }
  .centro .contenido { text-align: center; }
  .abajo .sub { margin-top: 14px; }
  .sub { font-size: 15px; margin-top: 14px; max-width: 34ch; }
  .meta { margin-bottom: 14px; font-size: 10px; }
  .circulo { width: 28px; height: 28px; }
  .acciones { margin-top: 18px; gap: 4px 18px; }
  .cta { min-height: 50px; padding: 0 18px; font-size: 12.5px; }
  .centro .acciones { justify-content: center; }

  .cuadricula { background-size: calc((100% - 2 * var(--pad)) / 3) 100%, 100% 25%; }
  .marco-fino { inset: calc(var(--arriba) - 2px) 8px calc(var(--abajo) - 8px); }
  .codigo { display: none; }

  .sello { width: 82px; }
  [data-p="04"] .sello { top: calc(var(--arriba) + 56px); right: var(--pad); }

  .dividido .foto { left: 0; bottom: 54%; }
  .dividido .velo { left: 0; bottom: 54%; }
  .dividido .sello { left: auto; right: var(--pad); top: calc(46% - 104px); bottom: auto; }

  .pie {
    grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px 12px;
    align-content: end; padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .etiqueta { grid-column: 1 / -1; grid-row: 1; font-size: 10px; letter-spacing: .1em; }
  .letra-chica { display: block; grid-column: 1; grid-row: 2; justify-self: start; text-align: left; font-size: 8.5px; letter-spacing: .05em; }
  .control { grid-column: 2; grid-row: 2; }
  .control { gap: 6px; }
  .contador { margin-right: 6px; font-size: 11px; }
  .flecha { width: 46px; height: 46px; }
  .aviso { bottom: calc(var(--abajo) + 8px); }

  .rejilla-todas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mini-titulo { font-size: 19px; }
  .mini-texto { inset: 8px 9px 10px; }
  .mini-pie { flex-direction: column; gap: 2px; font-size: 9.5px; }
}

/* Celular acostado o pantallas muy bajitas */
@media (max-height: 560px) and (min-width: 561px) {
  :root { --arriba: 46px; --abajo: 72px; }
  .portada { --fs: 15vh; }
  .sub, .nav-falsa, .codigo, .sello, .letra-chica { display: none; }
  .cabecera { top: calc(var(--arriba) + 2px); }
  .izq .contenido, .dividido .contenido { top: calc(var(--arriba) + 34px); }
  .meta { margin-bottom: 8px; }
  .acciones { margin-top: 12px; }
  .cta { min-height: 44px; }
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .foto, .activa .foto { transform: none !important; transition: none !important; }
  .linea > span, .anim { transform: none !important; }
  .linea > span { opacity: 0; transition: opacity .3s ease; }
  .activa .linea > span { opacity: 1; transition: opacity .4s ease .1s; }
  .activa .anim { transition: opacity .4s ease .1s; }
  .portada.activa { transition: opacity .35s ease; }
  .sello svg { animation: none; }
  .etiqueta.cambia, .todas[open] { animation: none; }
  .ico-sale, .mini-foto img, .aviso { transition: none; }
}