/* ============================================================
   PRISMA SHOP · shop.html (css/shop.css)
   La única página clara del sitio, a propósito (documento del cliente,
   sección 4): el Shop es un catálogo editorial sobre BLANCO dentro de un
   sitio negro. Cómo se resuelve sin romper la familia:
   · la página entera es una HOJA blanca (.sh-sheet) apoyada sobre la tinta
     del sitio; termina con las esquinas redondeadas sobre el cierre negro,
     que es donde se vuelve al pie de siempre;
   · al llegar desde otra página del sitio, una cortina de tinta se levanta
     (html.sh-enter, script del <head>): el paso del negro al blanco es un
     gesto, no un salto;
   · la cabecera es la misma (mismo marcado, main.css); aquí solo cambia de
     tema mientras está sobre la hoja, y vuelve al oscuro sobre el cierre,
     sobre el pie y con el menú móvil abierto.
   Contraste sobre blanco (medido): tinta #0A0A0A 19.8 · gris #5E5E5E 6.48 ·
   naranja de texto #C42D00 5.64 (el #FF4201 da 3.48: solo en texto ≥ 24 px,
   como el <em> de los titulares, y en rellenos con texto en tinta, 5.69).
   ============================================================ */

.shop-page {
  --sh-ink: #0A0A0A;
  --sh-ink-2: #5E5E5E;          /* texto secundario: 6.48 sobre blanco, 5.5 sobre la placa */
  --sh-ink-3: #8A8A8A;          /* solo decorativo (numerales, contadores con aria-hidden) */
  --sh-line: rgb(10 10 10 / .09);
  --sh-line-2: rgb(10 10 10 / .16);
  --sh-field: rgb(10 10 10 / .46); /* borde de campo ≥ 3:1 */
  --sh-plate: #E8E8E8;          /* fondo de foto y de tarjeta dibujada: el gris de los mockups */
  --sh-soft: #F4F4F4;
  --sh-band: #F3F3F2;
  --sh-otext: #C42D00;          /* naranja para texto pequeño sobre blanco */
  --sh-r: 12px;
  --sh-hh: 70px;                /* alto de la cabecera (js/shop.js lo mide) */
  color: var(--sh-ink);
}
.shop-page [id] { scroll-margin-top: 96px; }
/* Todo lo que lleva [hidden] se esconde de verdad, aunque su clase le dé un
   display (sin esto, los 15 bundles se veían a la vez). */
.shop-page [hidden] { display: none !important; }

/* ---------- Entrada: la cortina de tinta se levanta ---------- */
.sh-curtain { display: none; }
html.sh-enter .sh-curtain {
  display: block; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: var(--ink);
  animation: sh-curtain .95s var(--ease-enter) .08s both;
}
@keyframes sh-curtain { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---------- La hoja ---------- */
.sh-sheet {
  position: relative; z-index: 2;
  background: #FFFFFF; color: var(--sh-ink);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.sh-sheet ::selection, .sh-dlg ::selection { background: var(--orange); color: var(--ink); }

/* ---------- Cabecera en claro (solo sobre la hoja) ---------- */
/* Base oscura: .shop-page pone el texto en tinta y la cabecera lo heredaba; la
   hamburguesa (currentColor) quedaba tinta sobre tinta con el menú abierto y
   sobre el cierre negro. La regla de abajo la vuelve tinta solo sobre la hoja. */
.shop-page .header { color: var(--text-on-ink); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header { color: var(--sh-ink); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__link { color: rgb(10 10 10 / .84); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__link:hover { background: rgb(10 10 10 / .06); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__link[aria-current="page"],
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__link[aria-current="true"],
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__item.is-active > .header__link { color: var(--sh-otext); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header .header__logo .logo-color { display: block; }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header .header__logo .logo-white { display: none; }
/* Velo casi opaco sobre la hoja: a .8 las placas grises y los titulares de
   abajo se veían como manchas detrás del menú. El filete de 1 px marca el
   borde (en claro no hay artefacto de línea brillante: es tinta al 6 %). */
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header--blur::before { background: rgb(255 255 255 / .96); box-shadow: 0 1px 0 rgb(10 10 10 / .06); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header .btn--primary:hover { color: var(--sh-ink); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__menu {
  background: rgb(255 255 255 / .97); border-color: var(--sh-line-2);
  box-shadow: 0 18px 40px rgb(0 0 0 / .08);
}
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__menu a { color: var(--sh-ink-2); }
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__menu a:hover,
html:not(.menu-open) .shop-page:not(.sh-on-ink) .header__menu a:focus-visible { color: var(--sh-ink); background: rgb(10 10 10 / .05); }

/* ---------- Piezas de texto compartidas ---------- */
.sh-sheet .sh-kicker, .sh-sheet .kicker { color: var(--sh-otext); }
.sh-kicker { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sh-sheet .btn--primary:hover, .sh-dlg .btn--primary:hover { color: var(--sh-ink); }
.sh-sheet .btn--ghost, .sh-dlg .btn--ghost { border-color: var(--sh-line-2); color: var(--sh-ink); }

/* inline-block (no flex): la flecha va en un inline-block, así el
   subrayado es solo del texto y no salta por debajo de la flecha. */
.sh-textlink {
  display: inline-block;
  font-size: .98rem; font-weight: 500; color: var(--sh-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgb(10 10 10 / .3);
  transition: color .2s var(--ease-ui), text-decoration-color .2s var(--ease-ui);
}
.sh-textlink:hover { color: var(--sh-otext); text-decoration-color: currentColor; }
.sh-textlink > span[aria-hidden="true"] { display: inline-block; margin-left: 8px; transition: transform .28s var(--ease-snap); }
.sh-textlink:hover > span[aria-hidden="true"] { transform: translateX(3px); }
.sh-arrowlink {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
  font-size: 1rem; font-weight: 500; color: var(--sh-ink); line-height: 1.2;
  transition: color .2s var(--ease-ui);
}
.sh-arrowlink span { display: inline-block; transition: transform .28s var(--ease-snap); }
.sh-arrowlink:hover { color: var(--sh-otext); }
.sh-arrowlink:hover span { transform: translateX(4px); }
.sh-arrowlink[href^="#"]:hover span { transform: translateY(3px); }
.sh-fine { margin-top: 12px; font-size: .86rem; color: var(--sh-ink-2); }

/* Marco de una foto o de una tarjeta dibujada (va antes que los componentes
   que lo usan, para que ellos puedan cambiarle posición o display). */
.sh-media { position: relative; display: block; overflow: hidden; background: var(--sh-plate); isolation: isolate; }
.sh-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-soft), opacity .5s var(--ease-ui); }
.sh-media__img--alt { opacity: 0; }

/* Cabecera de sección: kicker + titular a la izquierda, texto a la derecha. */
.sh-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vh, 64px); }
.sh-head__title { font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; max-width: 17ch; }
.sh-head__title em { font-style: normal; color: var(--orange); }
.sh-head__text { color: var(--sh-ink-2); max-width: 44ch; font-size: 1.02rem; }
@media (min-width: 960px) {
  .sh-head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .sh-head .sh-kicker { grid-column: 1 / -1; }
  .sh-head__text { justify-self: end; }
}

/* ============ HERO ============ */
.sh-hero { padding: calc(var(--sh-hh) + clamp(44px, 9vh, 112px)) 0 clamp(28px, 5vh, 56px); overflow: clip; }
@media (max-width: 759px) { .sh-hero { padding-top: calc(var(--sh-hh) + clamp(28px, 5vh, 48px)); } }
.sh-hero__grid { display: grid; gap: 28px; }
.sh-hero__head .sh-kicker { display: block; margin-bottom: 22px; }
/* Migas "Soluciones / Prisma Shop" (css/main.css → .crumbs) en tinta sobre la hoja:
   el gris de texto secundario y el naranja para texto pequeño sobre blanco. */
.sh-hero__head .sh-crumbs { margin-bottom: 22px; }
.sh-sheet .crumbs a { color: var(--sh-ink-2); }
.sh-sheet .crumbs a:hover { color: var(--sh-ink); }
.sh-sheet .crumbs > span[aria-hidden] { color: var(--sh-ink-3); }
.sh-sheet .crumbs [aria-current] { color: var(--sh-otext); }
.sh-hero__title {
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  max-width: 17ch;
}
/* El naranja del titular es el resaltador de la palabra que rota (T09,
   kit Relato); la segunda línea va en gris para no tener dos naranjas. */
.sh-hero__title em { font-style: normal; color: var(--sh-ink-2); }
.sh-hero__title .rl-rotate { white-space: nowrap; }
/* El resaltador ocupa el alto de las letras, no el de la caja de la
   fuente: con el interlineado apretado del titular (1.03) la caja
   completa tocaba el renglón de arriba. */
.sh-hero__title .rl-rotate__w { background-position: 0 72%; background-size: 100% 82%; }
html.rl-anim .sh-hero__title .rl-rotate.is-run .rl-rotate__w { background-size: 0% 82%; }
html.rl-anim .sh-hero__title .rl-rotate.is-run .rl-rotate__w.is-hl { background-size: 100% 82%; }
/* La entrada es una sola frase, la clave (antes iba en negrita al final de un
   párrafo gris): va en tinta y con el peso de la frase destacada. */
.sh-hero__lead { font-size: clamp(1.06rem, 1.25vw, 1.22rem); font-weight: 500; line-height: 1.55; max-width: 38ch; text-wrap: balance; }
.sh-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 30px; }
.sh-btn-down:hover .btn__arrow { transform: translateY(3px); }
/* Cifras: el índice del Shop, debajo del estante (primero se ven las
   piezas). Cuatro columnas desde la tableta, dos en el teléfono. */
.sh-hero__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px;
  margin-top: clamp(30px, 5vh, 52px); padding-top: 24px; border-top: 1px solid var(--sh-line-2);
}
@media (min-width: 700px) { .sh-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-hero__facts dt { font-weight: 200; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-hero__facts dd { margin-top: 8px; font-size: .86rem; color: var(--sh-ink-2); }
/* Escritorio: las migas van en su propia fila, pegadas al titular, y la
   columna derecha arranca a la altura del titular (antes se apoyaba abajo y,
   como es más alta que el titular, empezaba 100 px por encima de él, sobre
   las migas). .sh-hero__head se disuelve en la rejilla para que migas y
   titular sean celdas propias. */
@media (min-width: 960px) {
  .sh-hero__grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 88px); row-gap: 0; align-items: start; }
  .sh-hero__head { display: contents; }
  .sh-hero__head .sh-kicker, .sh-hero__head .sh-crumbs { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(22px, 3vh, 30px); }
  .sh-hero__title { grid-column: 1; grid-row: 2; }
  /* 6 px: la caja del titular (interlineado 1.03) empieza más arriba que su
     mayúscula; así el primer renglón de la derecha y la mayúscula del
     titular quedan en la misma línea. */
  .sh-hero__side { grid-column: 2; grid-row: 2; padding-top: 6px; }
}

/* Muro de piezas (shop-03, Apple One): tres filas que pasan en sentidos
   opuestos; la del medio, las fotos. Sin pie de foto: el nombre y el precio
   los dice la burbuja que sigue al cursor. .sh-shelf envuelve el muro y su
   botón de pausa, que va fuera de las filas que se mueven (si estuviera
   dentro, el foco en el botón detendría y correría el muro). */
.sh-shelf { --sh-wall-w: clamp(124px, 14.6vw, 214px); --sh-wall-gap: clamp(10px, 1vw, 14px); position: relative; margin-top: clamp(36px, 7vh, 76px); }
.sh-wall { display: grid; gap: var(--sh-wall-gap); overflow: hidden; padding-block: 4px; }
.sh-wall__row { display: flex; gap: var(--sh-wall-gap); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.sh-wall__item { flex: none; width: var(--sh-wall-w); }
.sh-wall__link { display: block; aspect-ratio: 5 / 4; border-radius: var(--sh-r); background: var(--sh-plate); }
.sh-wall__link:focus-visible { outline: 2px solid var(--sh-ink); outline-offset: -2px; }
@media (hover: hover) { .sh-wall__link:hover .sh-media__img, .sh-wall__link:hover .sh-art__svg { transform: scale(1.05); } }
/* Movimiento reducido: cada fila se desliza a mano, con imán. */
.sh-wall.is-manual { overflow: visible; }
.sh-wall.is-manual .sh-wall__row { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.sh-wall.is-manual .sh-wall__row::-webkit-scrollbar { display: none; }
.sh-wall.is-manual .sh-wall__item { scroll-snap-align: start; }
/* Pausa (kit Relato, .rl-play; la misma del muro de Contenido & Redes):
   abajo a la derecha del muro. Tinta y no blanco: se lee igual sobre la
   placa gris de los dibujos y sobre las fotos naranjas. Al pasar el
   cursor, naranja con el ícono en tinta (nunca blanco). */
.sh-shelf__pause {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 14px;
  width: 40px; height: 40px; background: rgb(10 10 10 / .82); color: #FFFFFF;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 6px 18px -8px rgb(10 10 10 / .5);
}
/* El naranja solo con cursor: en táctil el :hover se queda pegado después del
   toque y el botón parecía otro control (el del kit lo pone siempre). */
.sh-shelf__pause:hover { background: rgb(10 10 10 / .82); color: #FFFFFF; }
@media (hover: hover) { .sh-shelf__pause:hover { background: var(--orange); color: var(--ink); } }
.sh-shelf__pause svg { width: 13px; height: 13px; }
.sh-shelf__pause:focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 3px; }

/* Burbuja que sigue al cursor (shop-02): sobre el muro y el lienzo dice el
   nombre y el precio; sobre la imagen de una tarjeta, "Ver ficha". */
.sh-bubble {
  position: fixed; left: 0; top: 0; z-index: 90; display: inline-flex; align-items: baseline; gap: 10px;
  padding: 9px 15px; border-radius: 999px; background: var(--orange); color: var(--ink);
  font-size: .84rem; line-height: 1.2; white-space: nowrap; pointer-events: none;
  opacity: 0; scale: .6; transform-origin: 0 0; transition: opacity .18s var(--ease-ui), scale .3s var(--ease-snap); will-change: transform;
}
.sh-bubble.is-on { opacity: 1; scale: 1; }
.sh-bubble b { font-weight: 500; }
.sh-bubble span { font-variant-numeric: tabular-nums; }

/* ============ KIT RELATO SOBRE LA HOJA BLANCA ============ */
/* Las piezas del kit (css/relato.css) leen sus colores de estos tokens.
   El Shop no usa .rl-ch--claro (es blanco de principio a fin): la hoja
   los redefine una vez y la banda gris de los bundles cambia la
   superficie a blanco. Naranja de texto chico: #C42D00 (5,6:1 sobre
   blanco); el #FF4201 solo en cifras y precios grandes. */
.sh-sheet {
  --rl-fg: var(--sh-ink);
  --rl-fg-2: var(--sh-ink-2);
  --rl-line: var(--sh-line-2);
  --rl-field: var(--sh-field);
  --rl-surface: var(--sh-soft);
  --rl-surface-2: #E6E6E6;
  --rl-hot: var(--sh-otext);
  --rl-hot-big: var(--orange);
  --rl-on-hot: var(--ink);
}
.sh-sheet .rl-title { font-weight: 400; }
.sh-sheet .rl-dual strong { font-weight: 500; }

/* La hoja del '+' (T11) en claro, como la ficha y el carrito del Shop. El
   kit la dibuja oscura y anima una placa (#1C1C1F) que crece desde la
   tarjeta: aquí la placa es blanca. El !important le gana a la animación
   (WAAPI), que está por debajo de las declaraciones importantes. */
.shop-page .rl-sheet { color: var(--sh-ink); }
.shop-page .rl-sheet__veil { background: rgb(10 10 10 / .46); }
.shop-page .rl-sheet__morph { background-color: #FFFFFF !important; }
.shop-page .rl-sheet__panel { background: #FFFFFF; color: var(--sh-ink); box-shadow: 0 30px 80px rgb(0 0 0 / .18); }
.shop-page .rl-sheet__close { background: var(--sh-soft); color: var(--sh-ink); }
.shop-page .rl-sheet__close:hover { background: var(--orange); color: var(--ink); }
.shop-page .rl-sheet .rl-tile__k { color: var(--sh-otext); }
.shop-page .rl-sheet__title { color: var(--sh-ink); font-weight: 400; }
.shop-page .rl-sheet__body { color: var(--sh-ink-2); }
.shop-page .rl-sheet__body strong { color: var(--sh-ink); }
.shop-page .rl-sheet__body .sh-fine { font-size: .9rem; }
.shop-page .rl-sheet__body .sh-arrowlink { margin-top: 4px; }
.shop-page .rl-sheet ::selection { background: var(--orange); color: var(--ink); }

/* ============ ANTES DE EMPEZAR (una línea con su '+') ============ */
.sh-gate { padding-top: clamp(48px, 9vh, 104px); }
.sh-gate__tiles { display: block; }
.sh-gate__tile {
  min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 28px; row-gap: 6px;
  padding: 24px 92px 24px clamp(22px, 2.4vw, 34px);
}
.sh-gate__tile .rl-tile__k { flex: none; }
.sh-gate__tile .rl-tile__t { margin: 0; max-width: none; font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); font-weight: 400; }
.sh-gate__tile .rl-tile__more { bottom: calc(50% - 22px); }

/* ============ CÓMO FUNCIONA (shop-05): cartas en abanico ============ */
.sh-how { padding: clamp(80px, 13vh, 150px) 0 0; }
.sh-how__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1100px) { .sh-how__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }
.sh-how__title { max-width: 13ch; }
.sh-how__title em { font-style: normal; color: var(--sh-ink-2); }
.sh-how__fan { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); counter-reset: none; }
@media (max-width: 759px) { .sh-how__fan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-how__card {
  position: relative; display: flex; flex-direction: column; min-height: clamp(220px, 21vw, 300px);
  padding: 16px 16px 18px; border-radius: 16px; background: var(--sh-soft);
  transition: translate .35s var(--ease-snap), background-color .3s var(--ease-ui);
}
.sh-how__card:nth-child(1) { z-index: 1; } .sh-how__card:nth-child(2) { z-index: 2; } .sh-how__card:nth-child(3) { z-index: 3; } .sh-how__card:nth-child(4) { z-index: 4; }
.sh-how__n { font-size: .74rem; font-weight: 500; letter-spacing: .14em; color: var(--sh-otext); font-variant-numeric: tabular-nums; }
.sh-how__art { display: block; width: 100%; max-width: 230px; height: auto; margin: 6px auto 14px; padding-block: 10px; }
/* El dibujo tiene su sitio fijo (no se centra en el hueco que deja el texto):
   así los cuatro títulos empiezan a la misma altura aunque uno ocupe dos líneas. */
.sh-how__t { font-size: .92rem; line-height: 1.4; color: var(--sh-ink-2); text-wrap: pretty; }
.sh-how__t b { display: block; margin-bottom: 2px; font-size: 1.04rem; font-weight: 500; color: var(--sh-ink); }
.sh-how__art .a-k { fill: #FFFFFF; stroke: #1B1B1B; stroke-width: 1.3; }
.sh-how__art .a-k2 { fill: #F8F8F8; stroke: #1B1B1B; stroke-width: 1.3; }
.sh-how__art .a-o { fill: #FF4201; stroke: #1B1B1B; stroke-width: 1.3; }
.sh-how__art .a-l { fill: none; stroke: rgb(27 27 27 / .26); stroke-width: 4; stroke-linecap: round; }
.sh-how__art .a-g { fill: none; stroke: rgb(27 27 27 / .13); stroke-width: 4; stroke-linecap: round; }
.sh-how__art .a-w { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; }
.sh-how__art .a-c { fill: none; stroke: #FF4201; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* El abanico: js/shop.js mide dónde queda cada carta y escribe --dx/--dy
   (hasta el centro) y --r; --fan va de 0 (juntas, en abanico) a 1 (en su
   sitio) con el scroll. Sin JS o con movimiento reducido no hay .is-fan. */
.sh-how__fan.is-fan .sh-how__card {
  transform: translate(calc(var(--dx, 0px) * (1 - var(--fan, 1))), calc(var(--dy, 0px) * (1 - var(--fan, 1)))) rotate(calc(var(--r, 0deg) * (1 - var(--fan, 1))));
  box-shadow: 0 calc((1 - var(--fan, 1)) * 18px) calc((1 - var(--fan, 1)) * 40px) rgb(10 10 10 / .12), 0 0 0 1px rgb(10 10 10 / calc((1 - var(--fan, 1)) * .06));
  will-change: transform;
}
@media (hover: hover) { .sh-how__card:hover { translate: 0 -5px; background: #EFEFEF; } }

/* "Ver por qué" (regla "una línea + ver por qué"): el plegable del kit. */
.sh-why { margin-top: 14px; }
.sh-why .rl-fold__btn { font-size: .92rem; }
.sh-why .rl-fold__inner p { color: var(--sh-ink-2); max-width: 46ch; line-height: 1.6; }
.sh-why .rl-fold__inner p + p { margin-top: 8px; }
.sh-why .rl-fold__inner strong { color: var(--sh-ink); font-weight: 500; }
.sh-why--ink .rl-fold__btn { color: var(--text-on-ink); }
.sh-why--ink .rl-fold__inner p { color: var(--text-on-ink-2); }

/* ============ PRECIOS: el 30 % y tres caminos ============ */
.sh-pricing { padding: clamp(40px, 6vh, 80px) 0 clamp(88px, 14vh, 160px); }
/* Una pantalla para una cifra (T04): el titular y su párrafo a la
   izquierda, el 30 % solo a la derecha, grande y en naranja. */
.sh-rate { display: grid; gap: clamp(28px, 5vw, 56px); align-items: end; }
@media (min-width: 960px) { .sh-rate { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: min(62svh, 600px); align-content: center; } }
.sh-rate__title { max-width: none; }
.sh-rate__title em { color: var(--sh-ink-2); }
.sh-rate .rl-lede { max-width: 27em; }
.sh-rate__fig { justify-self: start; }
@media (min-width: 960px) { .sh-rate__fig { justify-self: end; } }
.sh-rate__fig .rl-fig__q { font-weight: 400; color: var(--sh-ink-2); font-size: clamp(1rem, .9rem + .3vw, 1.2rem); }
.sh-rate__fig .rl-fig__n { font-size: clamp(7.5rem, 2.4rem + 13.5vw, 15rem); line-height: .86; letter-spacing: -0.06em; }
.sh-rate__fig .rl-fig__n small { font-size: .4em; letter-spacing: -0.03em; margin-left: .04em; }
.sh-rate__fig .rl-fig__line { max-width: 27ch; font-size: clamp(.98rem, .9rem + .25vw, 1.1rem); }
.sh-rate__fig .rl-fig__line strong { font-weight: 500; color: var(--sh-ink); }

/* Dos tarjetas (T11): un titular, una cuenta real y un '+' con el detalle.
   La tercera forma (Build Your Own Bundle) es "Arma tu pack", debajo. */
.sh-ways { margin-top: clamp(56px, 9vh, 104px); }
.sh-way { min-height: clamp(280px, 24vw, 340px); }
.sh-way .rl-tile__t { max-width: 16ch; font-weight: 400; }
.sh-way__fig { margin-top: auto; padding-top: 28px; padding-right: 58px; max-width: 460px; }
.sh-way .sh-calc { max-width: none; padding: 14px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--sh-line-2); }
.sh-way .sh-calc__k { margin-bottom: 6px; color: var(--sh-ink-2); font-weight: 400; }
.sh-way .sh-calc__row span:last-child { white-space: nowrap; }
@media (max-width: 599px) { .sh-way .rl-tile__t { margin-bottom: 4px; } }

/* Fichas de cálculo: números reales del catálogo, no un "30% OFF". */
.sh-calc { background: var(--sh-soft); border-radius: 14px; padding: 20px 22px; max-width: 360px; }
.sh-calc__k { font-size: .82rem; font-weight: 500; margin-bottom: 12px; }
.sh-calc__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .9rem; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-calc__row + .sh-calc__row { border-top: 1px dashed var(--sh-line-2); }
.sh-calc__row--on { color: var(--sh-ink); }
.sh-calc__row--on span:last-child { font-size: 1.25rem; font-weight: 400; color: var(--sh-otext); letter-spacing: -0.01em; }
.sh-calc__state { margin-top: 12px; font-size: .84rem; font-weight: 500; color: var(--sh-otext); }

/* ---- Arma tu pack (shop-01, Bucks Sauce) ----
   Escritorio: a la izquierda el titular, su línea y las cinco piezas para
   empezar; a la derecha el escenario: un aro punteado con cinco siluetas
   que se llenan y, en el centro, la cuenta. Teléfono: escenario arriba. */
.sh-pack {
  display: grid; gap: 30px clamp(28px, 4.5vw, 72px); margin-top: clamp(12px, 1.4vw, 20px);
  padding: clamp(24px, 3vw, 46px); border-radius: var(--r); background: var(--sh-soft);
  grid-template-areas: "head" "stage" "picks";
}
@media (min-width: 1000px) {
  .sh-pack { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head stage" "picks stage"; align-items: start; }
}
.sh-pack__head { grid-area: head; }
.sh-pack__stage { grid-area: stage; }
.sh-pack__picks { grid-area: picks; }
.sh-pack__title { margin-top: 12px; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; }
.sh-pack__line { margin-top: 10px; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.45; color: var(--sh-ink); max-width: 30ch; }
.sh-pack__pk { font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-ink-2); }
.sh-pack__list { margin-top: 12px; border-top: 1px solid var(--sh-line-2); }
.sh-pack__pick { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--sh-line-2); }
.sh-pack__pm { aspect-ratio: 5 / 4; border-radius: 8px; transition: box-shadow .3s var(--ease-ui); }
/* Ya está en el carrito: filete naranja en su miniatura (como sus casillas). */
.sh-pack__pick.is-in .sh-pack__pm { box-shadow: 0 0 0 2px var(--orange); }
.sh-pack__pm .sh-art__code { display: none; }
.sh-pack__pt { display: grid; gap: 2px; min-width: 0; }
.sh-pack__pn { font-size: .95rem; font-weight: 500; line-height: 1.25; transition: color .2s var(--ease-ui); }
.sh-pack__pn:hover { color: var(--sh-otext); }
.sh-pack__pp { font-size: .86rem; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-pack__more { margin-top: 16px; }
/* El escenario: el aro (la lista de casillas) y la cuenta en el centro. */
.sh-pack__stage { display: grid; grid-template-areas: "ring" "cta"; justify-items: center; gap: 22px; container-type: inline-size; }
.sh-pack__bar { display: contents; }
.sh-slots--pack { grid-area: ring; position: relative; width: min(100%, 470px); aspect-ratio: 1; }
.sh-slots--pack::before {
  content: ''; position: absolute; inset: 13%; border-radius: 50%;
  border: 1.5px dashed rgb(10 10 10 / .22); transition: border-color .5s var(--ease-ui), background-color .5s var(--ease-ui);
}
.sh-slots--pack.is-done::before { border-style: solid; border-color: var(--orange); background: rgb(var(--orange-rgb) / .05); }
/* Con Client Pricing el aro se tiñe antes de llenar las cinco: las casillas
   que siguen vacías toman el mismo tinte (gris sobre el rosado parecían
   agujeros). */
.sh-slots--pack.is-done .sh-slot:not(.is-full) { background: color-mix(in srgb, var(--orange) 5%, var(--sh-soft)); }
/* Las casillas vacías llevan el fondo del bloque: el aro pasa por detrás y
   no las cruza (antes la línea punteada atravesaba las siluetas 2 a 5). */
.sh-slots--pack .sh-slot { position: absolute; width: 27%; aspect-ratio: 5 / 4; background: var(--sh-soft); }
.sh-slots--pack .sh-slot:nth-child(1) { left: 36.5%; top: 2.2%; }
.sh-slots--pack .sh-slot:nth-child(2) { left: 71.7%; top: 27.8%; }
.sh-slots--pack .sh-slot:nth-child(3) { left: 58.3%; top: 69.1%; }
.sh-slots--pack .sh-slot:nth-child(4) { left: 14.7%; top: 69.1%; }
.sh-slots--pack .sh-slot:nth-child(5) { left: 1.3%; top: 27.8%; }
.sh-pack__sum { grid-area: ring; align-self: center; justify-self: center; z-index: 1; display: grid; justify-items: center; gap: 4px; max-width: 42%; text-align: center; }
@media (max-width: 999px) { .sh-pack__sum { max-width: 42%; } }
.sh-pack__sk { font-size: clamp(.7rem, calc(min(100cqw, 470px) * .026), .82rem); color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-pack__sk s { text-decoration-thickness: 1px; }
/* La cifra se mide con el aro (min(100cqw, 470px)) y con su largo (--sn-k lo
   escribe js/shop.js): entre las casillas 5 y 2 queda el 43 % del aro, y
   "USD 178,50" a tamaño fijo se metía debajo de las dos. */
.sh-pack__sn { font-weight: 200; font-size: clamp(1.45rem, calc(min(100cqw, 470px) * var(--sn-k, .085)), 3.3rem); line-height: 1; letter-spacing: -0.045em; color: var(--sh-ink); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .45s var(--ease-ui); }
.sh-pack__sl { font-size: clamp(.74rem, calc(min(100cqw, 470px) * .027), .84rem); line-height: 1.4; color: var(--sh-ink-2); text-wrap: balance; }
.sh-pack.is-done .sh-pack__sn { color: var(--orange); }
.sh-pack__cta { grid-area: cta; }
.sh-pack__cta[href^="#"] .btn__arrow { transition: transform .28s var(--ease-snap); }
.sh-pack__cta[href="#catalogo"]:hover .btn__arrow { transform: translateY(3px); }

/* ---- Casillas que se llenan (shop-01, shop-08) ----
   El mismo lenguaje en "Arma tu pack", "Tu pedido", el dock y el carrito:
   punteada y vacía; llena, la imagen de la pieza; con cinco, filete naranja. */
.sh-slot { position: relative; display: block; border-radius: 10px; border: 1.5px dashed rgb(10 10 10 / .24); overflow: hidden; transition: border-color .3s var(--ease-ui), box-shadow .4s var(--ease-ui), background-color .3s var(--ease-ui); }
.sh-slot__ghost { position: absolute; inset: 12%; width: 76%; height: 76%; fill: none; stroke: rgb(10 10 10 / .28); stroke-width: 1.4; stroke-dasharray: 3 3.5; stroke-linecap: round; transition: opacity .3s var(--ease-ui); }
.sh-slot__fill { position: absolute; inset: 0; display: block; }
.sh-slot__fill > .sh-media__img, .sh-slot__fill > .sh-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-slot__fill .sh-art__code { display: none; }
.sh-slot__n { position: absolute; left: 8px; top: 6px; z-index: 2; font-size: .7rem; font-weight: 500; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-slot.is-full { border-style: solid; border-color: transparent; background: var(--sh-plate); box-shadow: 0 10px 24px -14px rgb(10 10 10 / .45); }
.sh-slot.is-full .sh-slot__ghost { opacity: 0; }
.sh-slot.is-full .sh-slot__n { color: var(--sh-ink); }
.sh-slots.is-done .sh-slot.is-full { box-shadow: 0 0 0 2px var(--orange), 0 10px 24px -14px rgb(10 10 10 / .45); }
.sh-slot.is-pop { animation: sh-slot-pop .5s var(--ease-enter); }
@keyframes sh-slot-pop { from { transform: scale(.78); } }
.sh-slot[data-more]::after {
  content: attr(data-more); position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgb(10 10 10 / .62); color: #FFFFFF; font-size: .82rem; font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ============ BUNDLES ============ */
/* La banda gris es el capítulo de los bundles: el bundle que se abre
   (T07) y, debajo, el índice para elegir. Sobre ella las superficies del
   kit son blancas. */
.sh-band { background: var(--sh-band); --rl-surface: #FFFFFF; --rl-surface-2: #E4E4E3; }

/* ---- El bundle que se abre en sus piezas (T07, kit Relato) ---- */
.sh-unfold .rl-layers__pin { padding-top: clamp(84px, 13vh, 150px); }
.sh-unfold__head { max-width: none; display: grid; gap: 18px 48px; }
@media (min-width: 960px) { .sh-unfold__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.sh-unfold .rl-title { max-width: 16ch; }
.sh-unfold__lede { margin-top: 14px; font-size: clamp(1rem, .94rem + .3vw, 1.18rem); max-width: 36em; }
/* La cuenta: crece pieza a pieza y, al llegar a la bandeja, pasa al
   precio del bundle en naranja (sin tachados: el "por separado" queda
   arriba, en gris). Sin JS se ve el resultado. */
.sh-unfold__sum { text-align: left; font-variant-numeric: tabular-nums; min-width: 12ch; }
@media (min-width: 960px) { .sh-unfold__sum { text-align: right; } }
.sh-unfold__sk { font-size: .9rem; color: var(--sh-ink-2); }
.sh-unfold__sn { margin-top: 6px; font-weight: 200; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem); line-height: .95; letter-spacing: -0.045em; color: var(--orange); white-space: nowrap; transition: color .45s var(--ease-ui); }
.sh-unfold__sl { margin-top: 10px; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-otext); transition: color .45s var(--ease-ui); }
.sh-unfold__sum.is-counting .sh-unfold__sn { color: var(--sh-ink); }
.sh-unfold__sum.is-counting .sh-unfold__sl { color: var(--sh-ink-2); }
.sh-unfold__sum { transition: opacity .5s var(--ease-ui), transform .6s var(--ease-enter); }
.sh-unfold__sum.is-idle { opacity: 0; transform: translateY(8px); }

/* La pila: 7 capas (6 piezas + la bandeja) en 5:4, más juntas que en el
   ejemplo del kit para que entren abiertas en una pantalla. */
.sh-unfold .rl-layers__stage { --rl-gap: clamp(22px, 3.3vw, 50px); }
.sh-unfold .rl-layers__obj { aspect-ratio: 5 / 4; width: min(68%, 410px); }
.sh-unfold__layer { box-shadow: 0 1px 0 rgb(10 10 10 / .04); }
.sh-unfold__media { position: absolute; inset: 0; border-radius: inherit; }
.sh-unfold__tag {
  position: absolute; z-index: 2; left: 14px; top: 12px; padding: 5px 11px; border-radius: 999px;
  background: #FFFFFF; color: var(--sh-ink); border: 1px solid var(--sh-line-2);
  font-size: 13px; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
/* La bandeja: tinta, con el bundle y su precio. Es la base de la pila. */
.sh-unfold__tray {
  display: grid; align-content: center; justify-items: start; gap: 2px; padding: 0 11%;
  background: var(--sh-ink); border-color: var(--sh-ink); color: #FFFFFF;
}
.sh-unfold__tray::after { color: rgb(255 255 255 / .55); }
.sh-unfold__tk { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .62); }
.sh-unfold__tn { margin-top: 4px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.sh-unfold__tp { margin-top: 12px; font-size: clamp(34px, 4vw, 56px); font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.sh-unfold__tl { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
/* Recorrido: 40svh por capa (el kit da 60): siete pasos en cuatro pantallas. */
html.rl-anim .rl-layers.sh-unfold.is-live { height: calc(100svh + var(--rl-n, 7) * 40svh + 30svh); }
html.rl-anim .rl-layers.is-live .rl-layers__layer.sh-unfold__tray { background-color: var(--sh-ink); border-color: rgb(10 10 10 / .5); }
html.rl-anim .rl-layers.is-live .rl-layers__layer.sh-unfold__tray.is-on { background-color: var(--sh-ink); border-color: var(--orange); }
/* Las notas: nombre con su precio, y la frase de la pieza. */
.sh-unfold .rl-layers__note strong { font-weight: 500; }
.sh-unfold .rl-layers__note { align-content: start; }
.sh-unfold .rl-layers__note .sh-unfold__np { display: block; margin-top: 2px; font-weight: 300; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-unfold .rl-layers__note > span { font-size: .98rem; }
.sh-unfold__total em { font-style: normal; font-weight: 500; color: var(--sh-otext); }
/* Tableta apaisada: con notas a los dos lados la pila no entra; aquí la
   pila va a la izquierda y todas las notas a la derecha. */
@media (min-width: 960px) and (max-width: 1279px) {
  html.rl-anim .rl-layers.sh-unfold.is-live .rl-layers__stage { margin-right: min(34%, 330px); }
  html.rl-anim .rl-layers.sh-unfold.is-live .rl-layers__note.is-left { left: auto; right: 0; --rl-dx: 14px; }
  .sh-unfold .rl-layers__obj { width: min(64%, 360px); }
}
@media (min-width: 600px) and (max-width: 959px) { .sh-unfold .rl-layers__obj { width: min(56%, 380px); } }
@media (max-width: 599px) { .sh-unfold .rl-layers__obj { width: min(62%, 280px); } }
@media (max-width: 959px) {
  .sh-unfold__lede { display: none; }
  html:not(.rl-anim) .sh-unfold__lede { display: block; }
}
/* Que la pila abierta entre siempre en la pantalla. Fija, el escenario
   mide lo que queda bajo el encabezado (en escritorio, 100svh menos unos
   310 px) y la pila abierta mide ≈ 0,67 × su ancho + 5 × (4 px + gap) + 20,
   así que el ancho y el gap salen del ALTO de la pantalla: en 1280×720 y
   1366×768 la pila tapaba la entradilla y se cortaba abajo, en un teléfono
   de 667 px pisaba la cuenta y la nota, y en 1920×1080 quedaba chica. */
@media (min-width: 960px) {
  html.rl-anim .sh-unfold.is-live .rl-layers__stage { --rl-gap: clamp(16px, calc(9svh - 32px), 54px); }
  html.rl-anim .sh-unfold.is-live .rl-layers__obj { width: min(68%, clamp(250px, calc(74svh - 260px), 460px)); }
}
@media (min-width: 960px) and (max-width: 1279px) {
  html.rl-anim .sh-unfold.is-live .rl-layers__obj { width: min(64%, clamp(230px, calc(74svh - 260px), 380px)); }
}
/* Teléfono y tableta: la cuenta va en una fila (la cifra y, a su lado,
   las dos líneas chicas) para dejarle el alto a la pila. */
@media (max-width: 959px) {
  .sh-unfold__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: end; }
  .sh-unfold__sn { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; font-size: clamp(2.3rem, 1.6rem + 3vw, 3rem); }
  .sh-unfold__sk { grid-column: 2; grid-row: 1; }
  .sh-unfold__sl { grid-column: 2; grid-row: 2; margin-top: 3px; align-self: start; }
  html.rl-anim .sh-unfold.is-live .rl-layers__body { gap: 14px; }
  html.rl-anim .sh-unfold.is-live .rl-layers__stage { --rl-gap: clamp(10px, calc(3.4svh - 8px), 22px); }
  html.rl-anim .sh-unfold.is-live .rl-layers__obj { width: clamp(150px, calc(130svh - 670px), 280px); }
}
/* Con alto de sobra (la mayoría de los teléfonos) vuelve la primera frase
   de la entradilla: así se sabe desde el principio qué bundle se abre. */
@media (max-width: 959px) and (min-height: 740px) {
  html.rl-anim .sh-unfold__lede { display: block; margin-top: 10px; font-size: 0; max-width: none; }
  html.rl-anim .sh-unfold__lede strong { font-size: 1rem; }
  html.rl-anim .sh-unfold.is-live .rl-layers__obj { width: clamp(150px, calc(130svh - 712px), 280px); }
}
/* Teléfono: abiertas, las solapas de la caja salen ~1,5 veces el ancho de
   la pila; con 280 px se cortaban contra los dos bordes de la pantalla. */
@media (max-width: 599px) {
  html.rl-anim .sh-unfold.is-live .rl-layers__obj { max-width: 60vw; }
}
@media (min-width: 600px) and (max-width: 959px) and (min-height: 740px) {
  html.rl-anim .sh-unfold.is-live .rl-layers__stage { --rl-gap: clamp(14px, calc(4svh - 10px), 40px); }
  html.rl-anim .sh-unfold.is-live .rl-layers__obj { width: min(60%, clamp(200px, calc(130svh - 712px), 420px)); }
}
/* Las capas que no hablan, más tenues que en el kit: sus dibujos se
   cruzaban con el de la capa activa. Con la bandeja encendida (is-whole,
   lo pone js/shop.js) las seis piezas quedan solo como filetes naranjas,
   todas dentro del bundle, y la bandeja se lee limpia. */
html.rl-anim .sh-unfold.is-live .rl-layers__layer > * { opacity: calc(1 - var(--rl-open) * .86); }
/* Dentro de la caja negra, las capas que no hablan eran velos blancos al
   12 % y su dibujo al 14 %: sobre la tinta quedaban placas grises que
   ensuciaban la caja. Al subir (--sh-lift) pasan a ser solo su filete: la
   caja se lee negra y limpia, y la pieza que habla, entera y blanca. La
   bandeja es el fondo de la caja: tinta siempre (el precio del bundle
   espera ahí, tenue, hasta que le toca). */
html.rl-anim .sh-unfold.is-live .rl-layers__layer:not(.is-on):not(.sh-unfold__tray) { background-color: color-mix(in srgb, var(--rl-surface) calc((1 - var(--sh-lift)) * 100%), transparent); }
html.rl-anim .sh-unfold.is-live .rl-layers__layer:not(.is-on):not(.sh-unfold__tray) > * { opacity: calc(1 - var(--sh-lift) * .95); }
html.rl-anim .sh-unfold.is-live .rl-layers__layer:not(.is-on) .sh-unfold__tag { opacity: 0; }
html.rl-anim .sh-unfold.is-live.is-whole .rl-layers__layer:not(.sh-unfold__tray) { background-color: transparent; border-color: rgb(var(--orange-rgb) / .4); }
html.rl-anim .sh-unfold.is-live.is-whole .rl-layers__layer:not(.sh-unfold__tray) > * { opacity: .05; }

/* La caja Prisma (shop-05, Aardvark): la bandeja es su fondo; cuatro
   paredes se levantan de sus bordes y dos solapas la cierran. Cerrada (el
   principio del recorrido) solo se ve la caja; al abrirse (--rl-open del
   kit, de 0 a 1) las solapas giran hacia afuera y las piezas salen de ella.
   Mismo contexto 3D que las capas (preserve-3d), así se tapan bien entre sí.
   Sin JS o con movimiento reducido --rl-open vale 1: la caja abierta. */
/* --bh es el alto de las paredes. Va en px porque las solapas lo usan en
   translateZ(), que no admite porcentajes (con 11 % la regla entera se
   descartaba y las solapas quedaban planas en el fondo). js/shop.js lo
   ajusta al 9 % del ancho real de la pila. */
.sh-box { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; --bh: clamp(20px, 2.5vw, 44px); }
.sh-box i { position: absolute; display: block; background: #1E1E1E; border: 1px solid #111111; backface-visibility: visible; }
.sh-box__w--n, .sh-box__w--s { left: 0; width: 100%; height: var(--bh); transform-origin: 50% 0; }
.sh-box__w--n { top: 0; transform: rotateX(90deg); }
.sh-box__w--s { top: 100%; transform: rotateX(90deg); display: grid !important; place-items: center; background: linear-gradient(#262626, #161616); }
.sh-box__w--s b { font-size: clamp(11px, 1.2vw, 15px); font-weight: 500; letter-spacing: .02em; color: var(--orange); transform: scaleY(-1); }
.sh-box__w--w, .sh-box__w--e { top: 0; width: var(--bh); height: 100%; transform-origin: 0 50%; }
.sh-box__w--w { left: 0; transform: rotateY(-90deg); background: #171717; }
.sh-box__w--e { left: 100%; transform: rotateY(-90deg); background: #242424; }
/* Las solapas: bisagra arriba de las paredes largas; cerradas tapan la
   caja (cada una, la mitad), abiertas quedan inclinadas hacia afuera. */
.sh-box__f--n, .sh-box__f--s { left: 0; width: 100%; height: 50%; background: #202020; border-color: rgb(var(--orange-rgb) / .55); }
.sh-box__f--n { top: 0; transform-origin: 50% 0; transform: translateZ(var(--bh)) rotateX(calc(var(--rl-open, 1) * 128deg)); }
.sh-box__f--s { top: 50%; transform-origin: 50% 100%; transform: translateZ(var(--bh)) rotateX(calc(var(--rl-open, 1) * -128deg)); }
/* Primero se abre la caja y después salen las piezas: las solapas giran en
   el primer 45 % de --rl-open y las capas suben del 30 % al final (con el
   mismo ritmo, las piezas atravesaban las solapas a medio abrir). Mismas
   fórmulas del kit (css/relato.css, T07) con --sh-lift en lugar de
   --rl-open; sin JS las dos valen 1, como --rl-open. */
.sh-unfold .rl-layers__stage { --sh-lift: clamp(0, (var(--rl-open) - .3) / .7, 1); --sh-flap: clamp(0, var(--rl-open) / .45, 1); }
.sh-unfold .rl-layers__obj { transform: rotateX(56deg) rotateZ(calc(-36deg + var(--rl-open) * 6deg)) translateZ(calc((var(--rl-n, 5) - 1) * (4px + var(--rl-gap) * var(--sh-lift)) * -.5)); }
.sh-unfold .rl-layers__layer { transform: translateZ(calc(var(--rl-i, 0) * (4px + var(--rl-gap) * var(--sh-lift)))); }
.sh-box__f--n { transform: translateZ(var(--bh)) rotateX(calc(var(--sh-flap, 1) * 128deg)); }
.sh-box__f--s { transform: translateZ(var(--bh)) rotateX(calc(var(--sh-flap, 1) * -128deg)); }
/* Con la bandeja encendida (todo el bundle) la caja se aparta: el nombre y
   el precio del fondo se leen sin paredes delante. */
.sh-box { transition: opacity .6s var(--ease-ui); }
/* Del todo: con opacidad parcial el navegador aplana la caja y quedaban
   unas placas grises sueltas bajo la bandeja. */
html.rl-anim .sh-unfold.is-live.is-whole .sh-box { opacity: 0; }

/* ---- El índice de los bundles ---- */
.sh-bundles { padding: clamp(36px, 6vh, 72px) 0 clamp(80px, 13vh, 150px); }
.sh-bxhead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  margin-bottom: clamp(22px, 4vh, 40px); padding-top: 26px; border-top: 1px solid var(--sh-line-2);
}
.sh-bxhead__title { font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.sh-bx { display: grid; gap: 18px; }
/* Teléfono y tableta: las pestañas quedan pegadas arriba mientras se lee
   un bundle (la ficha es larga y había que volver a subir para cambiar). */
.sh-bx__index {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); scroll-padding-inline: var(--gutter);
  position: sticky; top: 0; z-index: 6; background: var(--sh-band);
  transition: top .6s var(--ease-exit);
}
.shop-page.sh-head-on .sh-bx__index { top: var(--sh-hh); transition: top .6s var(--ease-enter); }
.sh-bx__index::-webkit-scrollbar { display: none; }
.sh-bx__tab {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px;
  border: 1px solid var(--sh-line-2); border-radius: 999px; font-size: .92rem; color: var(--sh-ink-2); white-space: nowrap;
  transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.sh-bx__tab:hover { color: var(--sh-ink); border-color: var(--sh-ink); }
.sh-bx__tab[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.sh-bx__n { font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .7; }
.sh-bx__tmeta { display: none; }
@media (min-width: 1000px) {
  .sh-bx { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); gap: clamp(36px, 4.5vw, 72px); align-items: start; }
  .sh-bx__index { display: block; overflow: visible; margin: 0; padding: 0; border-top: 1px solid var(--sh-line-2); background: transparent; top: 28px; }
  .shop-page.sh-head-on .sh-bx__index { top: calc(var(--sh-hh) + 24px); }
  .sh-bx__tab {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; width: 100%; height: auto; padding: 12px 0 12px 14px; white-space: normal; line-height: 1.3;
    border: 0; border-bottom: 1px solid var(--sh-line-2); border-radius: 0; text-align: left; font-size: .98rem; position: relative;
  }
  .sh-bx__tab::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--orange); transform: scaleY(0); transition: transform .35s var(--ease-enter); }
  .sh-bx__tab:hover { border-color: var(--sh-line-2); }
  .sh-bx__tab[aria-selected="true"] { background: transparent; border-color: var(--sh-line-2); color: var(--sh-ink); }
  .sh-bx__tab[aria-selected="true"]::before { transform: none; }
  .sh-bx__tab[aria-selected="true"] .sh-bx__n { color: var(--sh-otext); opacity: 1; }
  .sh-bx__tmeta { display: block; font-size: .78rem; color: var(--sh-ink-2); white-space: nowrap; }
}
.sh-bx__stage { min-width: 0; }
.sh-bx__panel { display: grid; gap: 26px; }
.sh-bx__panel:focus-visible { outline-offset: 8px; }
.sh-bx__panel.is-in { animation: sh-panel .55s var(--ease-enter) both; }
@keyframes sh-panel { from { opacity: 0; transform: translateY(14px); } }
@media (min-width: 760px) { .sh-bx__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3.2vw, 52px); align-items: start; } }
.sh-bx__media { position: relative; }
.sh-bx__badge { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 10px; border-radius: 999px; background: rgb(255 255 255 / .92); font-size: .74rem; font-weight: 500; letter-spacing: .02em; }
.sh-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-mosaic > div { position: relative; overflow: hidden; border-radius: 12px; background: var(--sh-plate); aspect-ratio: 5 / 4; }
.sh-mosaic > .sh-mosaic__a { grid-column: 1 / -1; }
.sh-mosaic--one { grid-template-columns: 1fr; }
.sh-bx__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.05; }
.sh-bx__tagline { margin-top: 12px; font-size: 1.06rem; line-height: 1.45; }
.sh-bx__desc { margin-top: 10px; color: var(--sh-ink-2); font-size: .95rem; }
.sh-bx__more { margin-top: 12px; }
.sh-bx__more .rl-fold__btn { font-size: .9rem; color: var(--sh-ink); }
.sh-bx__more .rl-fold__btn:hover { color: var(--sh-otext); }
.sh-bx__more .sh-bx__desc { margin-top: 0; }
.sh-bx__calc { margin-top: 8px; font-size: .86rem; color: var(--sh-ink-2); }
/* El ahorro como número protagonista (shop-03, Apple One): grande y en
   naranja; debajo el precio con Bundle Pricing y el de las piezas sueltas;
   después las piezas como una fila de miniaturas con su nombre. */
/* "Ahorras" siempre encima de la cifra: en una fila, según el ancho de la
   cifra quedaba a su lado (USD 57) o encima (USD 85,50) de un bundle a otro. */
.sh-bx__save { display: grid; justify-items: start; gap: 8px; margin-top: 22px; }
.sh-bx__save span { font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-otext); }
.sh-bx__save strong { font-weight: 200; font-size: clamp(2.8rem, 1.7rem + 3.2vw, 4.6rem); line-height: .92; letter-spacing: -0.05em; color: var(--orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-bx__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; }
.sh-bx__price strong { font-weight: 400; font-size: 1.3rem; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.sh-bx__regular { font-size: .86rem; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-bx__label { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-otext); }
.sh-bx__minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sh-line-2); }
.sh-bx__mini { display: grid; gap: 7px; align-content: start; color: var(--sh-ink); }
.sh-bx__mmedia { aspect-ratio: 5 / 4; border-radius: 8px; }
.sh-bx__mmedia .sh-art__code { display: none; }
.sh-bx__mname { font-size: .78rem; line-height: 1.3; transition: color .2s var(--ease-ui); }
.sh-bx__mname small { display: block; font-size: .72rem; color: var(--sh-ink-2); }
@media (hover: hover) {
  .sh-bx__mini:hover .sh-bx__mname { color: var(--sh-otext); }
  .sh-bx__mini:hover .sh-media__img, .sh-bx__mini:hover .sh-art__svg { transform: scale(1.06); }
}
.sh-bx__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }
/* "Agregado": tinta con texto blanco, también con el cursor encima (el
   hover de .btn--primary dejaba el texto en tinta sobre tinta). */
.shop-page .btn--primary.is-added, .shop-page .btn--primary.is-added:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

/* ============ COLECCIONES (T12: galería horizontal del kit) ============ */
/* Cada colección es su portada en 5:4 (la proporción de las fotos del
   Shop), el nombre en negrita, una frase y cuántas piezas tiene. La fila
   sale por la derecha; las flechas las pone js/relato.js. */
.sh-collections { padding: clamp(84px, 13vh, 150px) 0 clamp(36px, 6vh, 64px); }
.sh-coll__text { margin-top: 14px; color: var(--sh-ink-2); max-width: 40ch; text-wrap: pretty; }
.sh-cg .rl-gal__item { width: clamp(262px, 29vw, 430px); }
.sh-cg__link { color: var(--sh-ink); }
.sh-cg__frame { aspect-ratio: 5 / 4; border-radius: var(--sh-r); background: var(--sh-plate); }
.sh-cg__frame .sh-media__img, .sh-cg__frame .sh-art__svg { transition: transform .9s var(--ease-soft); }
.sh-cg__cap { display: block; margin-top: 16px; }
.sh-cg__count { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .86rem; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-cg__arrow { display: inline-block; transition: transform .3s var(--ease-snap), color .2s var(--ease-ui); }
@media (hover: hover) {
  .sh-cg__link:hover .sh-media__img, .sh-cg__link:hover .sh-art__svg { transform: scale(1.035); }
  .sh-cg__link:hover .sh-cg__arrow { transform: translateX(4px); color: var(--sh-otext); }
  .sh-cg__link:hover b { color: var(--sh-otext); }
}
.sh-cg__link b { transition: color .2s var(--ease-ui); }
.sh-collections .rl-arrow { background: var(--sh-soft); }
.sh-collections .rl-arrow:hover:not([aria-disabled="true"]) { background: var(--orange); color: var(--ink); }

/* ============ CATÁLOGO ============ */
.sh-catalog { padding: clamp(70px, 11vh, 130px) 0 clamp(90px, 15vh, 180px); }
.sh-head--catalog { margin-bottom: clamp(26px, 4vh, 44px); }
.sh-head--catalog .sh-head__title { max-width: 22ch; }
.sh-filters__sentinel { display: block; height: 1px; }

/* Filtros · tableta y teléfono: una barra pegada arriba (buscador y carrito
   en la primera fila, categorías deslizables en la segunda). Baja con la
   cabecera cuando esta reaparece (top, no transform: así nunca se mueve
   mientras todavía no está pegada). */
.sh-filters {
  position: sticky; top: 0; z-index: 40;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  transition: top .6s var(--ease-exit);
}
.shop-page.sh-head-on .sh-filters { top: var(--sh-hh); transition: top .6s var(--ease-enter); }
.sh-filters::before {
  content: ''; position: absolute; inset: -6px 0 0 0; z-index: -1;
  background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-ui);
}
.sh-filters.is-stuck::before { border-bottom-color: var(--sh-line); }
.sh-filters__inner { display: flex; flex-direction: column; gap: 10px; padding-block: 12px; }
.sh-filters__tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sh-filters__label, .sh-filters__colls { display: none; }
.sh-filters__chips {
  display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: 3px var(--gutter); scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 44px), transparent);
}
.sh-filters__chips::-webkit-scrollbar { display: none; }
.sh-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border: 1px solid var(--sh-line-2); border-radius: 999px; font-size: .9rem; color: var(--sh-ink-2); white-space: nowrap;
  transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui), background-color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.sh-chip:hover { color: var(--sh-ink); border-color: var(--sh-ink); }
.sh-chip:active { transform: scale(.97); }
.sh-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.sh-chip__n { font-size: .74rem; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-chip[aria-pressed="true"] .sh-chip__n { color: var(--ink); }   /* al 72 % daba 4,07 sobre el naranja; tinta entera, 5,69 */
.sh-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px;
  border: 1px solid var(--sh-field); border-radius: 999px; color: var(--sh-ink-2); background: #FFFFFF;
  transition: border-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui);
}
.sh-search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(var(--orange-rgb) / .16); }
.sh-search svg { width: 16px; height: 16px; flex: none; }
.sh-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--sh-ink); outline: none; }
.sh-search input::placeholder { color: #6E6E6E; font-style: italic; }
.sh-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 6px; cursor: pointer; border-radius: 50%;
  background: #E4E4E4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='%230A0A0A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.sh-search input::-webkit-search-cancel-button:hover { background-color: var(--orange); }
.sh-cartbtn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px;
  border-radius: 4px; background: var(--ink); color: #FFFFFF; font-size: .9rem; font-weight: 500;
  transition: background-color .2s var(--ease-ui), transform .16s var(--ease-snap);
}
.sh-cartbtn:hover { background: #262626; }
.sh-cartbtn:active { transform: scale(.97); }
.sh-cartbtn svg { flex: none; width: 17px; height: 17px; }
.sh-cartbtn__n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--orange); color: var(--ink); font-size: .76rem; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.sh-cartbtn.is-empty .sh-cartbtn__n { background: rgb(255 255 255 / .16); color: rgb(255 255 255 / .8); }
.sh-cartbtn.is-bump .sh-cartbtn__n { animation: sh-bump .45s var(--ease-snap); }
@keyframes sh-bump { 40% { transform: scale(1.28); } }
@media (min-width: 760px) {
  .sh-filters__inner { flex-direction: row; align-items: center; gap: 18px; }
  .sh-filters__tools { order: 2; flex: none; }
  .sh-search { width: 220px; flex: none; }
  .sh-filters__chips { flex: 1 1 auto; margin: -3px 0; padding: 3px 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
}

/* Filtros · escritorio: un índice pegado a la izquierda, el mismo lenguaje
   que el índice de los bundles (filete, numeral en tinta, la barra naranja
   marca lo activo). Todas las categorías y las colecciones a la vista: en
   la barra de arriba no cabían y cuatro quedaban escondidas. */
.sh-cat__main { min-width: 0; }
@media (min-width: 1200px) {
  /* 244 px: el nombre más largo ("Espacios, Retail & Señalética", el mismo
     de la cabecera de su sección) cabe en una línea con su cifra. */
  .sh-cat { display: grid; grid-template-columns: 244px minmax(0, 1fr); column-gap: clamp(40px, 4vw, 64px); align-items: start; }
  .sh-filters {
    top: 28px; margin: 0; padding: 0 6px 0 0;
    max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sh-line-2) transparent;
  }
  .shop-page.sh-head-on .sh-filters { top: calc(var(--sh-hh) + 18px); max-height: calc(100vh - var(--sh-hh) - 46px); }
  /* En pantallas bajas (1440 × 900) el índice no cabe entero con "Tu
     pedido" arriba y las últimas colecciones quedaban cortadas sin aviso: un
     degradado abajo dice que sigue (js/shop.js → asideWheel pone .is-more
     mientras quede algo por ver). */
  .sh-filters.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
  .sh-filters::before { display: none; }
  .sh-filters__inner { display: block; padding: 0; }
  /* Buscador y carrito apilados a lo ancho del índice: el carrito se ve
     desde que se llega al catálogo, también vacío (el dock de abajo a la
     derecha solo aparece con la primera pieza). */
  .sh-filters__tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .sh-search { flex: none; width: auto; height: 38px; }
  .sh-filters .sh-cartbtn { width: 100%; height: 40px; padding: 0 10px 0 14px; }
  .sh-filters .sh-cartbtn__t { flex: 1; text-align: left; }
  .sh-filters__label { display: block; margin: 30px 0 10px; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-ink-2); }
  .sh-filters__chips, .sh-filters__colls {
    display: block; overflow: visible; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--sh-line-2);
    -webkit-mask-image: none; mask-image: none;
  }
  .sh-chip {
    position: relative; display: flex; width: 100%; height: auto; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0 6px 14px; border: 0; border-radius: 0; background: transparent; text-align: left; line-height: 1.35;
    font-size: .93rem; white-space: normal;
  }
  .sh-chip::before {
    content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 1px; background: var(--orange);
    transform: scaleY(0); transition: transform .35s var(--ease-enter);
  }
  .sh-chip:hover { border-color: transparent; color: var(--sh-ink); }
  .sh-chip:active { transform: none; }
  .sh-chip[aria-pressed="true"] { background: transparent; color: var(--sh-ink); }
  .sh-chip[aria-pressed="true"]::before { transform: none; }
  .sh-chip[aria-pressed="true"] .sh-chip__n { color: var(--sh-otext); }
  .sh-chip:focus-visible { outline-offset: 2px; }
  .sh-chip__t { transition: transform .3s var(--ease-snap); }
  .sh-chip:hover .sh-chip__t { transform: translateX(3px); }
}

/* Tu pedido (shop-08, Glow Recipe): en el índice del escritorio el botón
   Carrito pasa a ser un panel con cinco casillas que se llenan. */
.sh-order { display: none; }
@media (min-width: 1200px) {
  .sh-filters .sh-cartbtn { display: none; }
  .sh-order {
    display: grid; gap: 11px; width: 100%; margin-top: 2px; padding: 14px 14px 13px; border-radius: 12px;
    background: var(--ink); color: #FFFFFF; text-align: left; transition: background-color .2s var(--ease-ui), transform .16s var(--ease-snap);
  }
  .sh-order:hover { background: #1E1E1E; }
  .sh-order:active { transform: scale(.985); }
  .sh-order__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .sh-order__t { font-size: .95rem; font-weight: 500; }
  .sh-order__n { font-size: .8rem; color: rgb(255 255 255 / .66); font-variant-numeric: tabular-nums; }
  .sh-order.is-done .sh-order__n { color: var(--orange); }
  .sh-slots--order { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .sh-slots--order .sh-slot { aspect-ratio: 5 / 4; border-radius: 6px; border-color: rgb(255 255 255 / .3); border-width: 1px; }
  .sh-slots--order .sh-slot.is-full { border-color: transparent; box-shadow: none; }
  .sh-slots--order.is-done .sh-slot.is-full { box-shadow: 0 0 0 1.5px var(--orange); }
  .sh-order__msg { font-size: .8rem; line-height: 1.4; color: rgb(255 255 255 / .74); text-wrap: pretty; }   /* sin "30%." solo en su renglón */
  .sh-order.is-done .sh-order__msg { color: var(--orange); }
  .sh-order__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / .14); font-size: .8rem; color: rgb(255 255 255 / .66); }
  .sh-order__total b { font-size: .95rem; font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
  .sh-order:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  /* Con "Tu pedido" a la vista, el dock se aparta (un solo resumen). */
  .shop-page.sh-order-vis .sh-dock { transform: translateY(calc(100% + 40px)); }
}

/* Grilla o lienzo (shop-10). */
.sh-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sh-soft); margin-left: 12px; }
.sh-status__clear[hidden] + .sh-view { margin-left: auto; }
.sh-view__b { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; font-size: .84rem; color: var(--sh-ink-2); transition: color .2s var(--ease-ui), background-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui); }
.sh-view__b svg { width: 14px; height: 14px; flex: none; }
.sh-view__b:hover { color: var(--sh-ink); }
.sh-view__b[aria-pressed="true"] { background: #FFFFFF; color: var(--sh-ink); box-shadow: 0 1px 2px rgb(10 10 10 / .1), 0 0 0 1px rgb(10 10 10 / .05); }
@media (max-width: 599px) { .sh-view { margin-left: 0; } .sh-status__clear[hidden] + .sh-view { margin-left: 0; } }

/* El lienzo: un plano que se arrastra dentro de una ventana gris. */
.sh-cv {
  position: relative; height: clamp(460px, 74vh, 760px); border-radius: var(--sh-r); background: var(--sh-soft);
  overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.sh-cv.is-dragging { cursor: grabbing; }
.sh-cv__plane { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: repeat(14, 164px); gap: 14px; padding: 26px; width: max-content; will-change: transform; }
.sh-cv__tile { position: relative; display: block; border-radius: 10px; transition: opacity .45s var(--ease-ui), filter .45s var(--ease-ui); -webkit-user-drag: none; }
.sh-cv__media { display: block; aspect-ratio: 5 / 4; border-radius: 10px; pointer-events: none; }
.sh-cv__media .sh-art__code { display: none; }
.sh-cv__label {
  position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: space-between; gap: 6px;
  padding: 5px 8px; border-radius: 6px; background: rgb(255 255 255 / .94); font-size: .7rem; line-height: 1.25;
  opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease-ui), transform .3s var(--ease-snap); pointer-events: none;
}
.sh-cv__label b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cv__label span { flex: none; color: var(--sh-ink-2); }
.sh-cv__tile:focus-visible { outline: 2px solid var(--sh-ink); outline-offset: 3px; }
.sh-cv__tile:focus-visible .sh-cv__label { opacity: 1; transform: none; }
.sh-cv__tile.is-off { opacity: .14; filter: grayscale(1); }
.sh-cv__tile.is-in::after { content: ''; position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #FFFFFF; }
@media (hover: hover) {
  .sh-cv:not(.is-dragging) .sh-cv__tile:not(.is-off):hover .sh-media__img,
  .sh-cv:not(.is-dragging) .sh-cv__tile:not(.is-off):hover .sh-art__svg { transform: scale(1.06); }
}
.sh-cv__hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 2; display: inline-flex; gap: 8px; align-items: center;
  padding: 9px 16px; border-radius: 999px; background: var(--sh-ink); color: #FFFFFF; font-size: .82rem; white-space: nowrap;
  transform: translateX(-50%); pointer-events: none; transition: opacity .5s var(--ease-ui);
}
.sh-cv__hint.is-gone { opacity: 0; }
.sh-cv__stat { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .92); font-size: .78rem; color: var(--sh-ink-2); pointer-events: none; font-variant-numeric: tabular-nums; }
/* Teléfono: cuatro filas que se arrastran de lado; la página baja con el dedo en vertical. */
.sh-cv.is-strip { height: auto; }
.sh-cv.is-strip .sh-cv__plane { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: 118px; gap: 10px; padding: 46px 14px 54px; }
.sh-cv.is-strip .sh-cv__stat { top: 10px; right: 10px; }
.sh-cv.is-strip .sh-cv__hint { bottom: 12px; }

.sh-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: clamp(26px, 4vh, 40px) 0 clamp(20px, 3vh, 30px); }
@media (min-width: 1200px) { .sh-status { min-height: 38px; align-items: center; margin: 0 0 clamp(22px, 3vh, 32px); } }
.sh-status__title { font-size: clamp(1.02rem, 1.2vw, 1.15rem); font-weight: 500; letter-spacing: -0.01em; }
.sh-status__title:focus { outline: none; }   /* recibe el foco al abrir "Ver las N" (no es un control) */
.sh-status__count { color: var(--sh-ink-2); font-size: .92rem; font-variant-numeric: tabular-nums; }
.sh-status__clear { margin-left: auto; font-size: .9rem; }
.sh-tag {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px;
  background: var(--sh-soft); font-size: .84rem; color: var(--sh-ink);
}
.sh-tag::after { content: '×'; font-size: 1.05rem; line-height: 1; color: var(--sh-ink-2); }
.sh-tag:hover { background: #EAEAEA; }

/* Rejilla estricta (son más de 100 piezas: la claridad manda): 2 columnas
   en el teléfono, 3 en tableta y 4 en escritorio, con el índice a la
   izquierda. En "Todo", cada categoría muestra dos filas y cierra con la
   tarjeta "Ver las N" (js/shop.js → fold). */
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 760px) { .sh-grid { gap: 36px 18px; } }
@media (min-width: 900px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (min-width: 1360px) { .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; } }
.sh-grid__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 24px; margin-top: 10px; border-top: 1px solid var(--sh-line-2); }
.sh-grid__head:first-child { margin-top: 0; }
.sh-grid__head h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 400; letter-spacing: -0.02em; }
.sh-grid__head span { color: var(--sh-ink-2); font-size: .88rem; font-variant-numeric: tabular-nums; }
.sh-grid__all { flex: none; font-size: .9rem; }
.sh-grid [hidden], .sh-grid .is-folded { display: none !important; }

/* content-visibility: auto contiene la pintura y recorta en el borde de la
   tarjeta: el anillo de foco de "Agregar +" (2 px a 3 px del botón) perdía
   el lado derecho y el de abajo. 6 px de margen interior, devueltos con un
   margen negativo, dejan sitio al anillo sin mover la rejilla. */
.sh-card { display: flex; flex-direction: column; min-width: 0; padding: 6px; margin: -6px; content-visibility: auto; contain-intrinsic-size: auto 214px; }
/* Alto de reserva de las tarjetas que aún no se pintan, medido sin la
   descripción en cada rejilla (2, 2, 3 y 4 columnas): si sobra, la página
   salta hacia arriba al pintarlas. */
@media (min-width: 760px) { .sh-card { contain-intrinsic-size: auto 334px; } }
@media (min-width: 900px) { .sh-card { contain-intrinsic-size: auto 262px; } }
@media (min-width: 1360px) { .sh-card { contain-intrinsic-size: auto 250px; } }

/* "Ver las N": cierra cada categoría en la vista "Todo". Ocupa el hueco de
   una tarjeta: la placa con las siguientes piezas en abanico y la cifra de
   lo que falta; al pasar el cursor el abanico se abre. */
.sh-more { display: flex; min-width: 0; }
.sh-more__btn { display: flex; flex-direction: column; width: 100%; text-align: left; color: var(--sh-ink); border-radius: var(--sh-r); }
.sh-more__media { aspect-ratio: 5 / 4; border-radius: var(--sh-r); background: var(--sh-soft); }
.sh-more__fan { position: absolute; inset: 0; }
.sh-more__f {
  position: absolute; left: 50%; top: 42%; width: 44%; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 8px;
  background: var(--sh-plate); box-shadow: 0 0 0 1px rgb(10 10 10 / .05), 0 14px 26px -16px rgb(10 10 10 / .4);
  transform: translate(-50%, -50%) translateX(var(--x, 0)) rotate(var(--r, 0deg));
  transition: transform .55s var(--ease-snap);
}
.sh-more__f .sh-art__code { display: none; }
.sh-more__f:nth-child(1) { --x: -34%; --r: -7deg; z-index: 1; }
.sh-more__f:nth-child(2) { --x: 34%; --r: 7deg; z-index: 2; }
.sh-more__f:nth-child(3) { --x: 0%; --r: 0deg; z-index: 3; }
.sh-more__n {
  position: absolute; z-index: 4; left: 14px; bottom: 10px;
  font-weight: 200; font-size: clamp(1.7rem, 2.3vw, 2.3rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease-ui);
}
.sh-more__body { display: grid; gap: 4px; padding-top: 14px; }
.sh-more__t { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.sh-more__t span { display: inline-block; margin-left: 6px; transition: transform .28s var(--ease-snap); }
.sh-more__c { font-size: .87rem; line-height: 1.5; color: var(--sh-ink-2); }
.sh-more__btn:hover .sh-more__t, .sh-more__btn:focus-visible .sh-more__t { color: var(--sh-otext); }
.sh-more__btn:hover .sh-more__t span { transform: translateX(4px); }
.sh-more__btn:hover .sh-more__n { color: var(--sh-otext); }
@media (hover: hover) {
  .sh-more__btn:hover .sh-more__f:nth-child(1) { --x: -52%; --r: -11deg; }
  .sh-more__btn:hover .sh-more__f:nth-child(2) { --x: 52%; --r: 11deg; }
  .sh-more__btn:hover .sh-more__f:nth-child(3) { --x: 0%; --r: -2deg; }
}
/* La tarjeta (shop-02, OUTFIT): la imagen y una sola línea con el nombre y
   el precio. "Agregar" es un botón redondo en la esquina de la imagen; con
   el cursor se abre en "Agregar +". */
.sh-card__fig { position: relative; }
.sh-card__media { aspect-ratio: 5 / 4; border-radius: var(--sh-r); }
.sh-card__body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding-top: 12px; }
.sh-card__name { flex: 1 1 58%; min-width: 0; font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
.sh-card__name a { transition: color .2s var(--ease-ui); }
.sh-card__name a:hover { color: var(--sh-otext); }
.sh-card__price { flex: none; margin-left: auto; font-size: .95rem; font-variant-numeric: tabular-nums; line-height: 1.3; text-align: right; }
@media (max-width: 759px) {
  .sh-card__body { display: grid; gap: 3px; padding-top: 10px; }
  .sh-card__name { font-size: .95rem; }
  .sh-card__price { margin-left: 0; text-align: left; font-size: .9rem; }
}
/* Precio por página: "Desde USD 75 · USD 5 por página", en una línea bajo
   el nombre (el nombre de una pieza por página ya no comparte renglón con
   un precio de dos partes). El "por página" en gris: la cifra que manda es
   la de entrada. */
.sh-pp__sep, .sh-pp__per { color: var(--sh-ink-2); }
.sh-pp__per { white-space: nowrap; }
.sh-card--pp .sh-card__body { display: grid; gap: 3px; }
.sh-card--pp .sh-card__price { margin-left: 0; text-align: left; }
.sh-card--pp .sh-card__price .sh-pp__per { font-size: .86rem; }
/* En el teléfono la tarjeta mide ~170 px: el "por página" va en su renglón
   y sin el punto medio (si no, el punto quedaba colgando al final del primero). */
@media (max-width: 759px) {
  .sh-card--pp .sh-pp__sep { display: none; }
  .sh-card--pp .sh-pp__per { display: block; }
}
/* Las sugerencias del carrito son siempre angostas: igual, en dos renglones. */
.sh-xs .sh-pp__sep { display: none; }
.sh-xs .sh-pp__per { display: block; }
@media (hover: hover) {
  .sh-card:hover .sh-media__img { transform: scale(1.035); }
  .sh-card:hover .sh-media__img--alt { opacity: 1; }
  .sh-card:hover .sh-art__svg { transform: scale(1.04); }
}
/* "En tu carrito": se marca en la propia foto. */
.sh-card__in {
  position: absolute; z-index: 2; right: 10px; top: 10px; padding: 5px 9px; border-radius: 999px;
  background: var(--ink); color: #FFFFFF; font-size: .72rem; font-weight: 500; letter-spacing: .01em; pointer-events: none;
  animation: sh-pop .4s var(--ease-enter) both;
}
@keyframes sh-pop { from { opacity: 0; transform: scale(.8); } }

/* Precio de cliente: un beneficio, no una liquidación (sin tachados). */
.sh-p { display: inline-grid; gap: 1px; }
.sh-p__now { color: var(--sh-otext); }
.sh-p__note { font-size: .7rem; color: var(--sh-ink-2); letter-spacing: .01em; }

/* Botón "Agregar": el + se convierte en ✓ al agregar. */
.sh-add {
  flex: none; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px 0 13px;
  border: 1px solid var(--sh-line-2); border-radius: 4px; font-size: .86rem; font-weight: 500; color: var(--sh-ink); background: #FFFFFF;
  transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui), background-color .2s var(--ease-ui), transform .16s var(--ease-snap), padding .35s var(--ease-snap), gap .35s var(--ease-snap);
}
.sh-add:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.sh-add:active { transform: scale(.96); }
.sh-add__i { position: relative; width: 11px; height: 11px; flex: none; }
.sh-add__i::before, .sh-add__i::after { content: ''; position: absolute; left: 0; top: 50%; width: 11px; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 1px; transition: transform .3s var(--ease-snap), width .3s var(--ease-snap), left .3s var(--ease-snap); }
.sh-add__i::after { transform: rotate(90deg); }
.sh-add.is-added { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.sh-add.is-added .sh-add__i::before { width: 5px; left: 0; transform: translate(0, 2px) rotate(45deg); }
.sh-add.is-added .sh-add__i::after { width: 9px; left: 3px; transform: translate(0, -.5px) rotate(-50deg); }
/* En la tarjeta: redondo sobre la imagen (el texto queda para el lector de
   pantalla y se abre con el cursor). */
.sh-card .sh-add {
  position: absolute; z-index: 3; right: 10px; bottom: 10px; height: 40px; padding: 0 14.5px; gap: 0;
  border: 0; border-radius: 999px; justify-content: center;
  box-shadow: 0 0 0 1px rgb(10 10 10 / .08), 0 6px 16px -8px rgb(10 10 10 / .35);
}
.sh-card .sh-add__t { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--ease-snap), opacity .2s var(--ease-ui); }
.sh-card .sh-add.is-added { gap: 9px; }
.sh-card .sh-add.is-added .sh-add__t { max-width: 90px; opacity: 1; }
@media (hover: hover) {
  .sh-card:hover .sh-add, .sh-card .sh-add:focus-visible { gap: 9px; }
  .sh-card:hover .sh-add__t, .sh-card .sh-add:focus-visible .sh-add__t { max-width: 90px; opacity: 1; }
}
/* En "Arma tu pack": cuadrado, a la derecha de la fila. */
.sh-add--pack { height: 40px; }

/* La portada que se abre en páginas (shop-04, Pitch Templates): en las
   piezas que se cobran por página, al pasar el cursor (o con el foco en la
   tarjeta) la portada se encoge a la casilla de 2 × 2 y aparecen siete
   páginas y la cuenta. Las medidas en % salen de la rejilla de abajo
   (inset 6 % / 5 %, 4 × 3, separación 3,5 % / 2,8 %). */
.sh-pages {
  position: absolute; inset: 6% 5%; z-index: 1; display: grid; pointer-events: none;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3.5% 2.8%;
}
.sh-pages__cover { grid-column: 1 / span 2; grid-row: 1 / span 2; }
/* La cuenta, abajo a la izquierda y a lo ancho de dos casillas (como el
   "40 slides" de Pitch): en una sola casilla "15 / a 200 / págs." se partía
   en tres renglones. Abajo a la derecha va el botón Agregar. Con la cuenta
   a lo ancho caben seis páginas: la séptima se guarda. */
.sh-pages__n { grid-column: 1 / span 2; grid-row: 3; }
.sh-pages > i:nth-of-type(7) { display: none; }
.sh-pages > i, .sh-pages__n {
  position: relative; border-radius: 4px; opacity: 0; transform: translateY(10px) scale(.9);
  transition: opacity .3s var(--ease-ui), transform .5s var(--ease-enter);
}
.sh-pages > i { background: #FFFFFF; box-shadow: 0 0 0 1px rgb(10 10 10 / .07), 0 8px 16px -10px rgb(10 10 10 / .4); }
.sh-pages > i::before { content: ''; position: absolute; left: 14%; right: 14%; top: 14%; height: 40%; border-radius: 2px; background: #E4E4E4; }
.sh-pages > i::after { content: ''; position: absolute; left: 14%; right: 32%; bottom: 17%; height: 2px; border-radius: 1px; background: rgb(10 10 10 / .26); box-shadow: 0 -6px 0 rgb(10 10 10 / .16), 0 -12px 0 rgb(10 10 10 / .16); }
.sh-pages > i:nth-of-type(3n+2)::before { background: var(--orange); }
.sh-pages > i:nth-of-type(4n+3)::before { top: 14%; bottom: 14%; height: auto; }
.sh-pages > i:nth-of-type(4n+3)::after { display: none; }
.sh-pages > i:nth-of-type(5n+1)::before { height: 22%; }
.sh-pages__n { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 0 5px; padding: 0 6px; text-align: center; background: var(--orange); color: var(--ink); }
.sh-pages__n b { font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.55rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-pages__n small { font-size: .66rem; font-weight: 500; line-height: 1.1; white-space: nowrap; }
.sh-pages > :nth-child(2) { transition-delay: .04s; } .sh-pages > :nth-child(3) { transition-delay: .07s; }
.sh-pages > :nth-child(4) { transition-delay: .1s; } .sh-pages > :nth-child(5) { transition-delay: .13s; }
.sh-pages > :nth-child(6) { transition-delay: .16s; } .sh-pages > :nth-child(7) { transition-delay: .19s; }
.sh-pages > :nth-child(8) { transition-delay: .22s; } .sh-pages > :nth-child(9) { transition-delay: .25s; }
.sh-card--pp .sh-card__media > .sh-art, .sh-card--pp .sh-card__media > .sh-media__img {
  left: 0; top: 0; width: 100%; height: 100%; border-radius: 0;
  transition: left .55s var(--ease-enter), top .55s var(--ease-enter), width .55s var(--ease-enter), height .55s var(--ease-enter), border-radius .55s var(--ease-enter), box-shadow .55s var(--ease-enter);
}
.sh-card--pp .sh-art__code { transition: opacity .2s var(--ease-ui); }
@media (hover: hover) {
  .sh-card--pp:hover .sh-card__media > .sh-art, .sh-card--pp:hover .sh-card__media > .sh-media__img,
  .sh-card--pp:focus-within .sh-card__media > .sh-art, .sh-card--pp:focus-within .sh-card__media > .sh-media__img {
    left: 5%; top: 6%; width: 43.74%; height: 57.64%; border-radius: 6px; transform: none;
    box-shadow: 0 0 0 1px rgb(10 10 10 / .06), 0 12px 24px -14px rgb(10 10 10 / .5);
  }
  .sh-card--pp:hover .sh-art__svg, .sh-card--pp:focus-within .sh-art__svg { transform: none; }
  .sh-card--pp:hover .sh-art__code, .sh-card--pp:focus-within .sh-art__code { opacity: 0; }
  .sh-card--pp:hover .sh-pages > i, .sh-card--pp:hover .sh-pages__n,
  .sh-card--pp:focus-within .sh-pages > i, .sh-card--pp:focus-within .sh-pages__n { opacity: 1; transform: none; }
}

/* Entrada de las tarjetas (solo si main.js va a animar: html.anim). */
html.anim .sh-card.is-wait { opacity: 0; transform: translateY(22px); }
.sh-card.is-enter { transition: opacity .7s var(--ease-enter), transform .8s var(--ease-enter); }

.sh-empty { padding: 56px 0 20px; max-width: 520px; }
.sh-empty__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }
.sh-empty__text { margin-top: 10px; color: var(--sh-ink-2); }
.sh-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.sh-noscript { margin-top: 30px; padding: 18px 20px; border-radius: 12px; background: var(--sh-soft); color: var(--sh-ink); }
.sh-noscript a { text-decoration: underline; }

/* ============ CIERRE (vuelve la tinta) ============ */
.sh-close {
  position: relative; z-index: 1; background: var(--ink); color: var(--text-on-ink);
  margin-top: calc(-1 * var(--r-lg));
  padding: calc(var(--r-lg) + clamp(90px, 15vh, 170px)) 0 clamp(80px, 13vh, 150px);
}
.sh-close__grid { display: grid; gap: 24px; }
/* Una oración por bloque (renglones fijos en el HTML) y el naranja solo en
   "Prisma Shop": la Regla de la Brasa, nada de tres renglones naranjas. */
.sh-close__title { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; }
.sh-close__title .line-inner { text-wrap: balance; }
.sh-close__title em { font-style: normal; color: var(--orange); }
.sh-close__side p { color: var(--text-on-ink-2); max-width: 44ch; font-size: var(--fs-lead); }
.sh-close__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (min-width: 960px) {
  .sh-close__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 72px; align-items: end; }
  .sh-close__grid .kicker { grid-column: 1 / -1; }
}
/* El resplandor del pie sube menos que en el resto del sitio: aquí, más
   arriba del cierre, está la hoja blanca y no tiene que teñirse. */
.shop-page .footer::before { top: calc(-1 * clamp(240px, 38vh, 420px)); }

/* ============ DIÁLOGOS (ficha y carrito) ============ */
.sh-dlg {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--sh-ink); overflow: hidden; overflow: clip;
}
.sh-dlg::backdrop { background: rgb(10 10 10 / .52); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--ease-ui); }
.sh-dlg.is-open::backdrop { opacity: 1; }
.sh-dlg[open] { display: block; }
html.sh-lock, html.sh-lock body { overflow: hidden; }
.sh-x {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid var(--sh-line-2); color: var(--sh-ink);
  transition: background-color .2s var(--ease-ui), border-color .2s var(--ease-ui), transform .3s var(--ease-snap);
}
.sh-x svg { width: 18px; height: 18px; }
.sh-x:hover { border-color: var(--sh-ink); transform: rotate(90deg); }

/* ---------- Ficha ---------- */
/* La foto manda: la columna de la imagen mide exactamente 5:4 (la proporción
   de todos los mockups y dibujos), así nunca se recorta ni queda con franjas.
   El alto de la ficha sale de ese ancho: el 60 % del panel, o menos si la
   pantalla es baja. El texto se desplaza a la derecha. Solo en ventanas de
   escritorio estrechas (860-1000 px) el alto no baja de 460 px, para que el
   precio y "Agregar al carrito" se vean sin desplazar: ahí la foto pierde
   como mucho un 6 % por cada lado. */
.sh-qv__panel {
  --qv-w: min(1280px, calc(100vw - 48px));
  --qv-m: min(calc(var(--qv-w) * .6), calc((100dvh - 48px) * 1.25));
  position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: var(--qv-m) minmax(0, 1fr);
  width: var(--qv-w); height: max(calc(var(--qv-m) * .8), min(460px, calc(100dvh - 48px)));
  background: #FFFFFF; border-radius: 20px; overflow: hidden;
  opacity: 0; transform: translate(-50%, -47%) scale(.985);
  transition: opacity .3s var(--ease-ui), transform .5s var(--ease-enter);
}
.sh-qv.is-open .sh-qv__panel { opacity: 1; transform: translate(-50%, -50%); }
.sh-qv__close { position: absolute; z-index: 5; right: 18px; top: 18px; }
.sh-qv__media { position: relative; background: var(--sh-plate); min-height: 0; }
.sh-qv__stage { position: absolute; inset: 0; }
.sh-qv__stage > .sh-media { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease-ui); }
.sh-qv__stage > .sh-media.is-on { opacity: 1; }
.sh-qv__media .sh-art__code { display: none; }
.sh-qv__thumbs { position: absolute; left: 20px; bottom: 20px; z-index: 2; display: flex; gap: 8px; }
.sh-qv__thumb { position: relative; width: 64px; aspect-ratio: 5 / 4; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #FFFFFF; transition: border-color .2s var(--ease-ui), transform .2s var(--ease-snap); }
.sh-qv__thumb[aria-current="true"] { border-color: var(--orange); }
.sh-qv__thumb:hover { transform: translateY(-2px); }
.sh-qv__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-qv__nav { position: absolute; z-index: 2; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.sh-qv__info { overflow-y: auto; overscroll-behavior: contain; padding: clamp(36px, 5vh, 56px) clamp(28px, 3.4vw, 52px) 40px; }
.sh-qv__cats { font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-otext); padding-right: 50px; }
.sh-qv__title { margin-top: 14px; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.05; letter-spacing: -0.025em; outline: none; }
.sh-qv__desc { margin-top: 16px; font-size: 1.04rem; line-height: 1.6; }
.sh-qv__detail { margin-top: 10px; color: var(--sh-ink-2); }
.sh-qv__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sh-line-2); }
.sh-qv__amount { font-weight: 300; font-size: 2.2rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sh-qv__amount.is-client { color: var(--sh-otext); }
.sh-qv__note { font-size: .86rem; color: var(--sh-ink-2); }
.sh-qv__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.sh-qv__buy .btn { height: 48px; }
.sh-qv__hint { margin-top: 14px; font-size: .88rem; color: var(--sh-ink-2); text-wrap: pretty; }
.sh-qv__hint strong { color: var(--sh-ink); font-weight: 500; }
.sh-spec { margin-top: 30px; border-top: 1px solid var(--sh-line-2); }
.sh-spec > div { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--sh-line); }
/* Dos columnas solo si la columna de texto da para ello (depende del alto
   de la pantalla, no solo del ancho): se mide la propia columna. */
.sh-qv__info { container-type: inline-size; }
@container (min-width: 400px) { .sh-spec > div { grid-template-columns: 152px minmax(0, 1fr); gap: 20px; } }
.sh-spec dt { font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink); padding-top: .2em; }
.sh-spec dd { font-size: .93rem; color: var(--sh-ink-2); line-height: 1.6; }
.sh-spec ul { display: grid; gap: 2px; }
.sh-spec li { position: relative; padding-left: 16px; }
.sh-spec li::before { content: ''; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sh-qv__inb { margin-top: 26px; }
.sh-qv__inb p { font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink-2); }
.sh-qv__inb ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sh-qv__inb button { display: inline-flex; gap: 8px; height: 34px; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sh-line-2); font-size: .86rem; transition: border-color .2s var(--ease-ui), color .2s var(--ease-ui); }
.sh-qv__inb button:hover { border-color: var(--sh-ink); }
.sh-qv__inb button span { color: var(--sh-ink-2); }
.sh-qv__share { margin-top: 28px; font-size: .88rem; }
/* Los cinco renglones, detrás de un '+'. */
.sh-qv__fold { margin-top: 22px; border-top: 1px solid var(--sh-line-2); padding-top: 6px; }
.sh-qv__fold .rl-fold__btn { font-size: .92rem; color: var(--sh-ink); }
.sh-qv__fold .rl-fold__btn:hover { color: var(--sh-otext); }
.sh-qv__fold .sh-spec { margin-top: 4px; border-top: 0; }
/* Selector de páginas: − / campo / + y el deslizador; el precio de arriba
   sigue al número en vivo. */
.sh-pgctl { margin-top: 20px; }
.sh-pgctl__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sh-pgctl__label { font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink); }
.sh-pgctl__range { font-size: .84rem; color: var(--sh-ink-2); }
.sh-pgctl__row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.sh-qty--pg input {
  width: 58px; height: 100%; padding: 0; border: 0; background: transparent; text-align: center;
  font: inherit; font-size: 1rem; color: var(--sh-ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.sh-qty--pg input::-webkit-inner-spin-button, .sh-qty--pg input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sh-qty--pg input:focus { outline: none; }
.sh-qty--pg:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(var(--orange-rgb) / .16); }
.sh-qty--pg input[aria-invalid="true"] { color: var(--sh-otext); }
.sh-pgctl__slider { flex: 1; min-width: 0; height: 28px; accent-color: var(--orange); cursor: pointer; }
.sh-pgctl__err { margin-top: 8px; font-size: .84rem; color: var(--sh-otext); }
.sh-pgctl__err:empty { display: none; }
.sh-pgctl__err.is-note { color: var(--sh-ink-2); }
.sh-qv__qlabel { flex-basis: 100%; font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: -4px; }
/* El mosaico de páginas de la ficha (shop-04): la portada en 2 × 2 y una
   casilla por página; crece y se achica con el selector. */
.sh-qvpages { background: var(--sh-plate); }
.sh-qvpages__grid {
  position: absolute; inset: 6% 5% 12%; display: grid; gap: clamp(5px, .8vw, 10px);
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), minmax(0, 1fr));
}
.sh-qvpages__cover { grid-column: span 2; grid-row: span 2; border-radius: 6px; box-shadow: 0 0 0 1px rgb(10 10 10 / .06), 0 14px 28px -16px rgb(10 10 10 / .55); }
.sh-qvpages__cover .sh-art__code { display: none; }
.sh-qvpages__p { position: relative; border-radius: 4px; background: #FFFFFF; box-shadow: 0 0 0 1px rgb(10 10 10 / .06), 0 8px 16px -12px rgb(10 10 10 / .45); animation: sh-pg-in .35s var(--ease-enter) both; }
@keyframes sh-pg-in { from { opacity: 0; transform: scale(.82); } }
.sh-qvpages__p::before { content: ''; position: absolute; left: 14%; right: 14%; top: 13%; height: 38%; border-radius: 2px; background: #E4E4E4; }
.sh-qvpages__p::after { content: ''; position: absolute; left: 14%; right: 30%; bottom: 16%; height: 2px; border-radius: 1px; background: rgb(10 10 10 / .24); box-shadow: 0 -6px 0 rgb(10 10 10 / .15); }
.sh-qvpages__p:nth-child(3n+2)::before { background: var(--orange); }
.sh-qvpages__p:nth-child(4n+3)::before { bottom: 13%; height: auto; }
.sh-qvpages__p:nth-child(4n+3)::after { display: none; }
.sh-qvpages__p[data-more] { background: var(--orange); }
.sh-qvpages__p[data-more]::before { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; height: auto; background: none; color: var(--ink); font-size: clamp(.8rem, 1.2vw, 1.05rem); font-weight: 500; }
.sh-qvpages__p[data-more]::after { display: none; }
.sh-qvpages__n {
  position: absolute; left: 5%; bottom: 3.2%; padding: 6px 12px; border-radius: 999px; background: #FFFFFF;
  font-size: .82rem; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgb(10 10 10 / .06);
}
@media (max-width: 859px) {
  /* En el teléfono la ficha es una hoja que sube: la foto queda fija arriba y
     el texto se desplaza debajo (así la X siempre está a mano). */
  .sh-qv__panel {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: calc(100dvh - 14px);
    display: flex; flex-direction: column; border-radius: 20px 20px 0 0;
    transform: translateY(10%);
  }
  .sh-qv.is-open .sh-qv__panel { transform: none; }
  .sh-qv__media { flex: none; aspect-ratio: 5 / 4; max-height: 60dvh; width: 100%; }   /* 5:4 entera también en la tableta vertical */
  .sh-qv__close { right: 12px; top: 12px; }
  .sh-qvpages__grid { inset: 6% calc(5% + 52px) 12% 5%; }   /* la X de arriba a la derecha no tapa páginas */
  .sh-qv__info { flex: 1; min-height: 0; padding: 22px var(--gutter) calc(36px + env(safe-area-inset-bottom)); }
  .sh-qv__title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .sh-qv__thumbs { left: 12px; bottom: 12px; }
  .sh-qv__thumb { width: 50px; }
  .sh-qv__nav { right: 12px; bottom: 12px; }
  .sh-qv__nav .sh-x { width: 38px; height: 38px; }
}

/* Selector de cantidad */
.sh-qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--sh-line-2); border-radius: 999px; }
.sh-qty button { width: 40px; height: 100%; display: grid; place-items: center; font-size: 1.1rem; color: var(--sh-ink); border-radius: 999px; transition: background-color .2s var(--ease-ui); }
.sh-qty button:hover:not(:disabled) { background: var(--sh-soft); }
.sh-qty button:disabled { color: #B0B0B0; cursor: default; }
.sh-qty output { min-width: 28px; text-align: center; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sh-qty--sm { height: 34px; }
.sh-qty--sm button { width: 34px; }

/* ---------- Carrito ---------- */
.sh-cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100vw);
  display: flex; flex-direction: column; background: #FFFFFF;
  transform: translateX(104%); transition: transform .55s var(--ease-enter), width .75s var(--ease-enter);
}
.sh-cart.is-open .sh-cart__panel { transform: none; }
.sh-cart__head { position: relative; padding: 26px 86px 18px 28px; border-bottom: 1px solid var(--sh-line); }
.sh-cart__close { position: absolute; right: 22px; top: 20px; }
.sh-cart__back { display: inline-flex; gap: 8px; margin-bottom: 10px; font-size: .86rem; color: var(--sh-ink-2); }
.sh-cart__back:hover { color: var(--sh-ink); }
.sh-cart__title { font-size: 1.65rem; letter-spacing: -0.02em; outline: none; }
.sh-cart__sub { margin-top: 4px; font-size: .9rem; color: var(--sh-ink-2); }
.sh-cart__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px 30px; }
.sh-cart__foot { padding: 18px 28px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sh-line); background: #FFFFFF; }
.sh-cart__foot:empty { display: none; }
@media (max-width: 520px) {
  .sh-cart__head { padding: 20px 76px 14px var(--gutter); }
  .sh-cart__close { right: 14px; top: 14px; }
  .sh-cart__body { padding-inline: var(--gutter); }
  .sh-cart__foot { padding-inline: var(--gutter); }
}

.sh-cart__empty { padding: 48px 0 16px; }
.sh-cart__empty p:first-child { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.015em; }
.sh-cart__empty p + p { margin-top: 6px; color: var(--sh-ink-2); }
.sh-cart__empty div { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 22px; }

.sh-cmeter { max-width: none; margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--sh-soft); }
.sh-slots--cart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sh-slots--cart .sh-slot { aspect-ratio: 5 / 4; border-radius: 7px; }
.sh-cmeter__t { display: grid; gap: 2px; margin-top: 12px; font-size: .88rem; line-height: 1.45; }
.sh-cmeter__t strong { font-weight: 500; }
.sh-cmeter__t span { color: var(--sh-ink-2); }
.sh-cmeter.is-done { background: #FFF1EA; }
.sh-cmeter.is-done .sh-cmeter__t strong { color: var(--sh-otext); }

.sh-lines { margin-top: 8px; }
.sh-line { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--sh-line); animation: sh-line-in .45s var(--ease-enter) both; }
@keyframes sh-line-in { from { opacity: 0; transform: translateY(6px); } }
.sh-line__media { position: relative; width: 78px; aspect-ratio: 5 / 4; border-radius: 8px; }
.sh-line__media .sh-art__code { display: none; }
.sh-line__name { font-size: .98rem; font-weight: 500; line-height: 1.3; }
.sh-line__name a:hover { color: var(--sh-otext); }
.sh-line__meta { margin-top: 2px; font-size: .8rem; color: var(--sh-ink-2); line-height: 1.45; }
.sh-line__unit { margin-top: 4px; font-size: .82rem; line-height: 1.45; color: var(--sh-ink-2); font-variant-numeric: tabular-nums; }
.sh-line__unit em { display: block; font-style: normal; color: var(--sh-otext); }
.sh-line .sh-qty { margin-top: 0; }
.sh-line__ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 10px; }
.sh-line__pg, .sh-line__q { display: grid; gap: 4px; }
.sh-line__pg label, .sh-line__ql { font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-ink-2); }
.sh-qty--sm.sh-qty--pg input { width: 46px; font-size: .9rem; }
.sh-line__err { margin-top: 6px; font-size: .8rem; color: var(--sh-otext); }
.sh-line__err:empty { display: none; }
.sh-line__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; text-align: right; }
.sh-line__total { font-size: .98rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.sh-line__was { display: block; font-size: .76rem; font-weight: 400; color: var(--sh-ink-2); }
.sh-line__rm { font-size: .8rem; color: var(--sh-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sh-line__rm:hover { color: var(--sh-otext); }

.sh-code { margin-top: 26px; padding: 20px; border-radius: 14px; border: 1px solid var(--sh-line-2); }
.sh-code h3 { font-size: 1rem; }
.sh-code > p { margin-top: 4px; font-size: .88rem; color: var(--sh-ink-2); }
.sh-code__form { display: flex; gap: 8px; margin-top: 14px; }
.sh-code__form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--sh-field); border-radius: 4px;
  font: inherit; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-ink); background: #FFFFFF;
}
.sh-code__form input::placeholder { text-transform: none; letter-spacing: 0; color: #6E6E6E; font-style: italic; }
.sh-code__form input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgb(var(--orange-rgb) / .16); }
.sh-code__form .btn { height: 44px; padding: 0 18px; }
.sh-code__msg { margin-top: 10px; font-size: .88rem; color: var(--sh-ink-2); }
.sh-code__msg.is-ok { color: var(--sh-otext); font-weight: 500; }
.sh-code__msg.is-bad { color: var(--sh-otext); }
.sh-code.is-on { border-color: var(--orange); background: #FFF6F1; }
.sh-code__on { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sh-code__on strong { font-weight: 500; color: var(--sh-otext); }

.sh-xs { margin-top: 30px; }
.sh-xs h3 { font-size: 1rem; }
.sh-xs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 14px; }
.sh-xs__media { aspect-ratio: 5 / 4; border-radius: 8px; }
.sh-xs__media .sh-art__code { display: none; }
.sh-xs__name { margin-top: 8px; font-size: .86rem; font-weight: 500; line-height: 1.3; }
.sh-xs__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .84rem; color: var(--sh-ink-2); }
.sh-xs__add { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--sh-line-2); color: var(--sh-ink); transition: background-color .2s var(--ease-ui), border-color .2s var(--ease-ui); }
.sh-xs__add:hover { background: var(--orange); border-color: var(--orange); }
.sh-xs__add svg { width: 12px; height: 12px; }

.sh-sum { display: grid; gap: 6px; }
.sh-sum > div { display: flex; justify-content: space-between; gap: 16px; font-size: .93rem; font-variant-numeric: tabular-nums; }
.sh-sum dt { color: var(--sh-ink-2); }
.sh-sum .is-disc dd { color: var(--sh-otext); }
.sh-sum .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--sh-line); font-size: 1.15rem; }
.sh-sum .is-total dt { color: var(--sh-ink); font-weight: 500; }
.sh-sum .is-total dd { font-weight: 500; }
.sh-sum > .is-total:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sh-foot__cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 16px; font-size: 1.02rem; }
.sh-foot__note { margin-top: 10px; font-size: .8rem; color: var(--sh-ink-2); text-align: center; }
.sh-foot__cta[aria-busy="true"] { pointer-events: none; opacity: .8; }
.sh-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sh-spin .7s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* En pantallas táctiles los campos van a 16 px: con menos, iOS amplía la
   página al enfocarlos (el buscador y el código estaban en 14,7 y 15,2). */
@media (pointer: coarse) {
  .sh-search input, .sh-code__form input { font-size: 16px; }
}

/* La cortina al abrir el carrito (shop-02, OUTFIT): el panel llega naranja
   con "Tu pedido" y la cortina se corre hacia la derecha. */
.sh-cart__curtain {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none;
  background: var(--orange); color: var(--ink); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: -0.03em;
  clip-path: inset(0 0 0 100%);
}
.sh-cart.is-curtain .sh-cart__curtain { animation: sh-curtain-wipe .95s var(--ease-enter) both; }
.sh-cart.is-curtain .sh-cart__curtain span { animation: sh-curtain-t .95s var(--ease-ui) both; }
@keyframes sh-curtain-wipe { 0%, 44% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes sh-curtain-t { 0% { opacity: 0; transform: translateY(10px); } 22%, 44% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateX(30px); } }

/* ---------- Datos del pedido ---------- */
.sh-form { padding-top: 22px; }
.sh-field { display: grid; gap: 6px; margin-bottom: 16px; min-width: 0; }
.sh-field label { font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-ink); }
.sh-field__opt { margin-left: 6px; letter-spacing: .04em; text-transform: none; color: var(--sh-ink-2); font-weight: 400; }
.sh-field input, .sh-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--sh-ink); background: #FFFFFF;
  border: 1px solid var(--sh-field); border-radius: 10px; padding: 12px 14px;
  transition: border-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui);
}
.sh-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.sh-field input::placeholder, .sh-field textarea::placeholder { color: #6E6E6E; font-style: italic; }
.sh-field input:focus, .sh-field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgb(var(--orange-rgb) / .16); }
.sh-field [aria-invalid="true"] { border-color: var(--sh-otext); }
.sh-field__err { font-size: .82rem; color: var(--sh-otext); min-height: 0; }
.sh-field__err:empty { display: none; }
.sh-form__row { display: grid; grid-template-columns: 1fr; column-gap: 12px; }
@media (min-width: 440px) { .sh-form__row { grid-template-columns: 1fr 1fr; } }
.sh-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-items: start; margin-top: 6px; }
.sh-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1px solid var(--sh-field); border-radius: 5px; background: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease-ui), border-color .2s var(--ease-ui); }
.sh-check input::after { content: ''; width: 10px; height: 5px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .2s var(--ease-snap); }
.sh-check input:checked { background: var(--orange); border-color: var(--orange); }
.sh-check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.sh-check input[aria-invalid="true"] { border-color: var(--sh-otext); }
.sh-check label { font-size: .92rem; line-height: 1.5; cursor: pointer; }
.sh-check .sh-field__err { grid-column: 2; }
.sh-form__privacy { margin-top: 16px; font-size: .8rem; color: var(--sh-ink-2); }
.sh-form__privacy a { text-decoration: underline; text-underline-offset: 3px; }
.sh-form__error { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: #FFF1EA; color: var(--sh-ink); font-size: .9rem; }
.sh-form__error a { color: var(--sh-otext); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sh-hp { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Confirmación: la hoja se abre a pantalla completa ---------- */
.sh-cart.is-done .sh-cart__panel { width: 100vw; }
.sh-cart.is-done .sh-cart__head { border-bottom-color: transparent; }
.sh-cart.is-done .sh-cart__title, .sh-cart.is-done .sh-cart__sub, .sh-cart.is-done .sh-cart__back { display: none; }
.sh-cart.is-done .sh-cart__body { display: grid; place-items: center; }
.sh-done { width: 100%; max-width: 560px; margin: 0 auto; padding: 4vh 0 8vh; text-align: center; }
.sh-done__check { width: 92px; height: 92px; margin: 0 auto 28px; overflow: visible; }
.sh-done__check circle { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 340; stroke-dashoffset: 340; transform: rotate(-90deg); transform-origin: center; }
.sh-done__check path { fill: none; stroke: var(--sh-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.sh-done.is-on .sh-done__check circle { animation: sh-draw .8s var(--ease-enter) .15s forwards; }
.sh-done.is-on .sh-done__check path { animation: sh-draw .5s var(--ease-enter) .7s forwards; }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
.sh-done__title { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; outline: none; }
.sh-done__text { margin: 18px auto 0; color: var(--sh-ink-2); max-width: 46ch; }
.sh-done__num { margin-top: 26px; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink-2); }
.sh-done__num strong { display: block; margin-top: 8px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-done__wa { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--sh-line-2); }
.sh-done__wa h3 { font-size: 1.15rem; }
.sh-done__wa p { margin: 8px auto 0; color: var(--sh-ink-2); max-width: 42ch; font-size: .95rem; }
.sh-done__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 24px; }
.sh-done__actions .btn { height: 52px; padding: 0 28px; }
.sh-done > * { opacity: 0; transform: translateY(12px); }
.sh-done.is-on > * { opacity: 1; transform: none; transition: opacity .6s var(--ease-ui), transform .7s var(--ease-enter); }
.sh-done.is-on > :nth-child(2) { transition-delay: .35s; }
.sh-done.is-on > :nth-child(3) { transition-delay: .45s; }
.sh-done.is-on > :nth-child(4) { transition-delay: .55s; }
.sh-done.is-on > :nth-child(5) { transition-delay: .6s; }
.sh-done.is-on > :nth-child(6) { transition-delay: .7s; }
/* Solo si el total guardado no es el que se veía (un precio cambió con la
   página abierta): el servidor manda, y se dice. */
.sh-done__note { margin: 14px auto 0; max-width: 44ch; font-size: .9rem; color: var(--sh-ink-2); }
.sh-done__note strong { color: var(--sh-ink); font-weight: 500; }

/* ============ DOCK DEL CARRITO ============ */
.sh-dock {
  position: fixed; z-index: 60; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px 0 12px; overflow: hidden;
  border-radius: 14px; background: var(--ink); color: #FFFFFF; text-align: left;
  transform: translateY(calc(100% + 40px)); transition: transform .55s var(--ease-enter), background-color .2s var(--ease-ui);
}
.sh-dock[hidden] { display: none; }
.sh-dock.is-on { transform: none; }
.sh-dock:hover { background: #1E1E1E; }
/* Las cinco casillas del dock (shop-08): en el teléfono, la barra de abajo. */
.sh-slots--dock { display: grid; grid-template-columns: repeat(5, 24px); gap: 4px; flex: none; }
.sh-slots--dock .sh-slot { height: 20px; border-radius: 4px; border-width: 1px; border-color: rgb(255 255 255 / .34); }
.sh-slots--dock .sh-slot.is-full { border-color: transparent; box-shadow: none; }
.sh-slots--dock.is-done .sh-slot.is-full { box-shadow: 0 0 0 1.5px var(--orange); }
.sh-slots--dock .sh-slot[data-more]::after { font-size: .62rem; }
.sh-dock__main { display: grid; line-height: 1.2; transition: opacity .25s var(--ease-ui), transform .35s var(--ease-enter); }
.sh-dock__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .62); }
.sh-dock__count { font-size: .95rem; }
.sh-dock__total { margin-left: 6px; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; transition: opacity .25s var(--ease-ui); }
.sh-dock { min-width: 270px; }
.sh-dock__msg { position: absolute; left: 160px; right: 18px; top: 50%; display: grid; line-height: 1.25; transform: translateY(-20%); opacity: 0; transition: opacity .25s var(--ease-ui), transform .4s var(--ease-enter); }
.sh-dock__msg b, .sh-dock__msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-dock__msg b { font-weight: 500; font-size: .92rem; }
.sh-dock__msg span { font-size: .78rem; color: rgb(255 255 255 / .7); }
.sh-dock.is-msg .sh-dock__main, .sh-dock.is-msg .sh-dock__total { opacity: 0; }
.sh-dock.is-msg .sh-dock__main { transform: translateY(-40%); }
.sh-dock.is-msg .sh-dock__msg { opacity: 1; transform: translateY(-50%); }
.sh-dock.is-bump { animation: sh-dock-bump .5s var(--ease-snap); }
@keyframes sh-dock-bump { 35% { transform: scale(1.04); } }
.shop-page.sh-cart-open .sh-dock, .shop-page.sh-dock-away .sh-dock { transform: translateY(calc(100% + 40px)); }
/* La caja que se abre (escena fija): en tableta y teléfono la nota de cada
   pieza va abajo, donde está el dock; mientras dura, el dock se aparta. */
@media (max-width: 959px) { .shop-page.sh-dock-scene .sh-dock { transform: translateY(calc(100% + 40px)); } }
@media (max-width: 640px) {
  .sh-dock { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 58px; gap: 12px; padding: 0 16px 0 12px; }
  .sh-dock__total { margin-left: auto; white-space: nowrap; }
  .sh-dock__label { white-space: nowrap; }
  /* Casillas más chicas: con las de 24 px el rótulo y el total se partían en dos líneas a 390 px. */
  .sh-slots--dock { grid-template-columns: repeat(5, 18px); gap: 3px; }
  .sh-slots--dock .sh-slot { height: 15px; border-radius: 3px; }
  .sh-dock__msg { left: 128px; }
}
@media (max-width: 359px) { .sh-dock__label { display: none; } }
/* La pieza que vuela al carrito al agregarla. */
.sh-fly { position: fixed; z-index: 80; left: 0; top: 0; border-radius: 10px; overflow: hidden; pointer-events: none; background: var(--sh-plate); will-change: transform, opacity; }
.sh-fly .sh-art__code { display: none; }

/* ============ TARJETAS DIBUJADAS (scripts/gen/_shop-art.js) ============
   Cada dibujo sale UNA vez en la página, como <g id="art-<pieza>"
   class="sh-art__g"> dentro de un .sh-defs, y cada lugar lo usa con <use>.
   Lo de dentro de un <use> vive en su propio árbol: un selector con un
   antepasado de fuera (.sh-art .k, .sh-card:hover .ok) no lo alcanza. Por
   eso los colores cuelgan de .sh-art__g, la clase del propio <g>, y lo que
   cambie con el contexto (hover, tamaño) va sobre .sh-art__svg, el <svg>
   de fuera, o se hereda con variables. */
.sh-art { position: absolute; inset: 0; display: block; background: radial-gradient(120% 95% at 50% 38%, #F1F1F1 0%, #E7E7E7 62%, #E1E1E1 100%); }
.sh-art__svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .9s var(--ease-soft); }
.sh-art__code { position: absolute; z-index: 2; left: 14px; top: 12px; font-size: .66rem; font-weight: 500; letter-spacing: .16em; color: #5E5E5E; font-variant-numeric: tabular-nums; }
.sh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sh-art__g .k, .sh-art__g .k2, .sh-art__g .ok, .sh-art__g .dk, .sh-art__g .g, .sh-art__g .frame, .sh-art__g .oring, .sh-art__g .oringT, .sh-art__g .kring,
.sh-art__g .ring, .sh-art__g .wheel, .sh-art__g .strap, .sh-art__g .handle, .sh-art__g .needle, .sh-art__g .string, .sh-art__g .wv, .sh-art__g .wvw,
.sh-art__g .oline, .sh-art__g .icw, .sh-art__g .ico, .sh-art__g .shine, .sh-art__g .cur, .sh-art__g .strapO, .sh-art__g .strapDash, .sh-art__g .hole {
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.sh-art__g .k { fill: #FFFFFF; stroke: #1B1B1B; stroke-width: 1.15; }
.sh-art__g .k2 { fill: #F3F3F3; stroke: #1B1B1B; stroke-width: 1.15; }
.sh-art__g .ok { fill: #FF4201; stroke: #1B1B1B; stroke-width: 1.15; }
.sh-art__g .o { fill: #FF4201; }
.sh-art__g .dk { fill: #1A1A1A; stroke: #1B1B1B; stroke-width: 1.15; }
.sh-art__g .d { fill: #1A1A1A; }
.sh-art__g .spine { fill: rgb(0 0 0 / .07); }
.sh-art__g .deb { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 1; }
.sh-art__g .g { fill: none; stroke: rgb(27 27 27 / .3); stroke-width: 1; }
.sh-art__g .frame { fill: none; stroke: #1B1B1B; stroke-width: 2.2; }
.sh-art__g .t, .sh-art__g .th, .sh-art__g .tw, .sh-art__g .tfade { fill: none; stroke-linecap: round; }
.sh-art__g .t { stroke: rgb(27 27 27 / .2); stroke-width: 4.5; }
.sh-art__g .tfade { stroke: rgb(27 27 27 / .1); stroke-width: 4.5; }
.sh-art__g .th { stroke: rgb(27 27 27 / .78); stroke-width: 6; }
.sh-art__g .tw { stroke: rgb(255 255 255 / .9); stroke-width: 5; }
.sh-art__g .oline { fill: none; stroke: #FF4201; stroke-width: 2.2; }
.sh-art__g .wv { fill: none; stroke: #FF4201; stroke-width: .9; opacity: .85; }
.sh-art__g .wvw { fill: none; stroke: #FFFFFF; stroke-width: .9; opacity: .62; }
.sh-art__g .ograd { fill: url(#sha-og); }
.sh-art__g .oring { fill: none; stroke: #FF4201; stroke-width: 2.4; }
.sh-art__g .oringT { fill: none; stroke: #FF4201; stroke-width: 1.6; }
.sh-art__g .kring { fill: none; stroke: #FFFFFF; stroke-width: 2; opacity: .9; }
.sh-art__g .ring { fill: none; stroke: #1B1B1B; stroke-width: 3; }
.sh-art__g .wheel { fill: #1A1A1A; stroke: #1B1B1B; stroke-width: 1.15; }
.sh-art__g .strap { fill: none; stroke: #1B1B1B; stroke-width: 5; }
.sh-art__g .strapO { fill: none; stroke: #FF4201; stroke-width: 7; stroke-linecap: butt; }
.sh-art__g .strapDash { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-dasharray: 2 7; }
.sh-art__g .handle { fill: none; stroke: #1B1B1B; stroke-width: 13; }
.sh-art__g .needle { fill: none; stroke: #1B1B1B; stroke-width: 2.2; }
.sh-art__g .string { fill: none; stroke: #1B1B1B; stroke-width: 1.2; }
.sh-art__g .hole { fill: #E7E7E7; stroke: #1B1B1B; stroke-width: 1.15; }
.sh-art__g .shine { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 2.4; }
.sh-art__g .qrf { fill: none; stroke: #1A1A1A; stroke-width: 9; }
.sh-art__g .icw { fill: none; stroke: #FFFFFF; stroke-width: 2.4; }
.sh-art__g .ico { fill: none; stroke: #FF4201; stroke-width: 2.4; }
.sh-art__g .cur { fill: none; stroke: #FF4201; stroke-width: 2; }
.sh-art__g .pat { fill: url(#sha-pat); stroke: none; }
.sh-art__g .patlogo { fill: url(#sha-logo); stroke: none; }
.sh-art__g .sd { fill: url(#sha-sd); }
.sh-art__g .num { font-family: var(--f-display); font-weight: 300; font-size: 64px; fill: #1B1B1B; letter-spacing: -0.03em; }

/* ============ SIN JAVASCRIPT ============ */
html.no-js .sh-bx__panel[hidden] { display: grid !important; margin-top: 40px; }
html.no-js .sh-add, html.no-js .sh-bx__add, html.no-js [data-open-cart], html.no-js [data-open-code] { display: none; }

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion: reduce) {
  .sh-curtain, .sh-cart__curtain, .sh-bubble { display: none !important; }
  .sh-qv__panel, .sh-cart__panel, .sh-dock, .sh-dlg::backdrop, .sh-filters, .sh-bx__index { transition: none !important; }
  .sh-media__img, .sh-art__svg, .sh-unfold__sn, .sh-unfold__sl, .sh-more__f, .sh-more__t span, .sh-pages > *, .sh-cv__tile, .sh-how__card, .sh-slot, .sh-box { transition: none !important; }
  .sh-bx__panel.is-in, .sh-line, .sh-card__in, .sh-dock.is-bump, .sh-cartbtn.is-bump .sh-cartbtn__n, .sh-slot.is-pop, .sh-qvpages__p { animation: none !important; }
  /* La portada no se abre sola con el cursor: las páginas están en la ficha. */
  .sh-card--pp .sh-pages { display: none; }
  .sh-done > * { opacity: 1; transform: none; }
  .sh-done__check circle, .sh-done__check path { stroke-dashoffset: 0; animation: none !important; }
}