/* The shop pages that are the guides, the manual and the kit (/guides, /guides/<slug>, /manual, /kit; oct 2026, docs/web/SECCIONES.md "Tienda"). Built by tools/sales_pages.py, moved by site/js/sales.js
   and site/js/shop.js. Loaded after site/css/magazine.css and site/css/shop.css (the showcase, the books, the tour, the split screens, the spec sheet, the $0, the chat and the close are there);
   everything here is what only these pages have: the control that picks the real page of her skin or her day, the 12 seasons, the notes side by side, the kit on the table and the capsule of the manual.
   Everything works without JS and with prefers-reduced-motion: the notes sit side by side, the cards are in place. Motion is transform and opacity only. */

.sales-page .mz-w { display: inline-block; overflow: clip; padding: .08em .1em .16em .05em; margin: -.08em -.1em -.16em -.05em; }
.sales-page .mz-wi { display: inline-block; transition: transform .85s var(--mz-spring); transition-delay: calc(var(--ln, 0) * 35ms); }
.sales-page .mz-wi.is-down { transform: translateY(112%); transition: none; }
@media (prefers-reduced-motion: reduce) { .sales-page .mz-wi { transition: none; } }
.nw { white-space: nowrap; }

/* the page as a sheet of paper (the same figure in the notes, the skin control and the kit) */
.sp-page { margin: 0; display: grid; gap: 7px; align-content: start; }
.sp-page img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 26px 28px -16px rgba(0, 0, 0, .75); }
.sp-page figcaption { font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sp-crop-box { position: relative; overflow: hidden; aspect-ratio: var(--ar); background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 26px 28px -16px rgba(0, 0, 0, .75); }
.sp-crop-box img { display: block; width: 100%; height: auto; box-shadow: none; transform: translateY(var(--t)); }
.sh-pg .sp-crop-box { width: 100%; }

/* ---------- a page for your skin (on /manual, for your day): the real page and what it says ---------- */
.sp-depth-ui[hidden] { display: none; }
.sp-skins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sp-skin-chip { min-height: 44px; padding: 6px 20px 5px; border: 1.5px solid rgba(247, 241, 232, .55); border-radius: 999px; background: transparent; color: var(--paper); font: 600 16.5px/1.1 var(--sans); cursor: pointer; transition: background-color .2s, color .2s, transform .5s var(--mz-spring); }
.sp-skin-chip:active { transform: scale(.96); }
.sp-skin-chip[aria-selected="true"], .sp-skin-chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sp-skin-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-skins--circ { gap: 10px; }
.sp-circ { display: inline-flex; align-items: center; gap: 9px; padding-left: 8px; }
.sp-circ::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--g, #ccc); box-shadow: 0 0 0 1.5px rgba(247, 241, 232, .55); }
.sp-skin-panel { display: grid; gap: 18px; margin-top: 26px; align-items: start; }
.sp-skin-panel .sp-page { width: min(62vw, 250px); }
.sp-skin-text { display: grid; gap: 14px; align-content: start; max-width: 32em; }
.sp-skin-text p { color: var(--t2); }
.sp-skin-text .sp-note-w, .sp-skin-text .sp-note-f { padding-top: 12px; border-top: 1px solid var(--line); font: 400 17.5px/1.45 var(--sans); color: var(--paper); }
.sp-skin-also { font: italic 400 17px/1.4 var(--sans); color: var(--accent); }
.sp-skin-panel.is-new .sp-page { animation: sp-slide .7s var(--mz-spring) both; }
.sp-skin-panel.is-new .sp-skin-text { animation: sp-slide .7s var(--mz-spring) .06s both; }
@keyframes sp-slide { from { opacity: 0; transform: translateX(34px) rotate(1.6deg); } to { opacity: 1; transform: none; } }
.sp-depth-live .sp-notes, .sp-depth-live .sp-foot { display: none; }
.sp-skin-levels { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-skin-formula { display: grid; gap: 10px; }
.sp-skin-notes { border-top: 1px solid var(--line); }
.sp-skin-notes summary { min-height: 44px; padding: 12px 0; font: 600 16.5px/1.3 var(--sans); color: var(--paper); cursor: pointer; }
.sp-skin-notes-in { display: grid; gap: 8px; padding-bottom: 12px; }
.sp-skin-notes-in p { margin: 0; font: 400 16px/1.45 var(--sans); }
@media (min-width: 760px) { .sp-skin-panel { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } .sp-skin-panel .sp-page { width: 100%; } }
/* the notes side by side (no JS, reduced motion) */
.sp-notes { display: flex; gap: 22px; margin: 20px 0 0; padding: 22px var(--gutter) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); }
.sp-note { flex: 0 0 min(72vw, 280px); display: grid; gap: 10px; align-content: start; scroll-snap-align: center; }
.sp-chip { justify-self: start; padding: 5px 12px 4px; font: 700 12.5px/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--accent); border-radius: 2px 10px 3px 8px; }
.sp-note-w, .sp-note-f, .sp-note-x { font: 400 16.5px/1.4 var(--sans); color: var(--paper); margin: 0; }
.sp-note b, .sp-skin-text b { display: block; font: 700 12.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.sp-note-x { font-style: italic; color: var(--t2); }
.sp-foot { padding: 0 var(--gutter); max-width: var(--wrap); margin: 16px auto 0; font: 400 16.5px/1.45 var(--sans); color: var(--t2); }
.sp-depth .sp-cta--skin, .sp-depth .cta { margin-top: 26px; }
@media (min-width: 900px) {
  .sp-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; max-width: var(--wrap); margin-inline: auto; padding: 22px var(--gutter) 10px; overflow: visible; }
  .sp-note { flex: none; }
}
.sp-depth--manual .sp-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- /guides: the 12 seasons, a free test card first ---------- */
.sp-picks { list-style: none; margin: 0; padding: 8px var(--gutter) 26px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.sp-picks::-webkit-scrollbar { display: none; }
.sp-pick { flex: 0 0 min(66vw, 236px); scroll-snap-align: start; display: grid; }
.sp-pick a { display: grid; gap: 9px; align-content: start; padding: 14px 0 6px; color: var(--paper); text-decoration: none; border-top: 1px solid var(--paper); transition: transform .45s var(--mz-spring); }
.sp-pick a:hover, .sp-pick a:focus-visible { color: var(--paper); transform: translateY(-4px); }
.sp-pick-strip { display: flex; height: 30px; }
.sp-pick-strip i { flex: 1; background: var(--c); }
.sp-pick-n { font: 400 25px/1.1 var(--serif); letter-spacing: -.005em; }
.sp-pick-l { font: 400 16.5px/1.35 var(--sans); color: var(--t2); }
.sp-pick-k { font: 700 12.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sp-pick--test a { border-top-color: var(--accent); border-top-width: 3px; padding-right: 8px; }
.sp-pick--test .sp-pick-n { color: var(--accent); }
.sp-pick.is-yours a { border-top: 3px solid var(--accent); }
@media (min-width: 900px) {
  .sp-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 30px; max-width: var(--wrap); margin-inline: auto; padding: 8px var(--gutter) 10px; overflow: visible; }
  .sp-pick { flex: none; }
  .sp-pick--test { grid-column: 1 / -1; }
  .sp-pick--test a { grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 22px; }
}

/* ---------- /kit: the printables on the table ---------- */
.sp-table { position: relative; width: min(100%, 420px); padding-top: 96px; margin-inline: auto; }
.sp-table .sh-floor { bottom: -8px; width: 104%; }
.sp-table .sp-page--hero { transform: rotate(-1deg); }
.sp-card-pieces { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 0; height: 100px; z-index: 2; }
.sp-sheet { position: relative; }
.sp-strip-hits { position: absolute; left: 1.4%; width: 97.2%; top: 6%; height: 30%; cursor: ew-resize; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.sp-strip-hits:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.sp-card-piece { position: absolute; left: var(--x); top: var(--y); width: 21%; aspect-ratio: 3 / 4; display: grid; align-items: end; padding: 6px 7px; background: var(--c); border: 5px solid #fff; border-radius: 2px; box-shadow: 0 1px 0 rgba(43, 34, 48, .1), 0 10px 14px -8px rgba(0, 0, 0, .7); rotate: var(--r); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .25s var(--ease), scale .3s var(--mz-spring); }
.sp-card-piece span { margin: 0 -7px -6px; padding: 4px 7px 5px; background: #fff; font: 700 12.5px/1.1 var(--sans); color: #2B2230; }
.sp-card-piece.is-held { cursor: grabbing; scale: 1.06; box-shadow: 0 1px 0 rgba(43, 34, 48, .1), 0 22px 24px -10px rgba(0, 0, 0, .75); z-index: 5; }
.sp-card-piece:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sp-what { margin: 12px 0 0; max-width: 30em; font: 400 17px/1.4 var(--sans); color: var(--t2); }
.sh-show--kit .sp-page--hero { width: 100%; }
@media (min-width: 900px) { .sp-table { padding-top: 124px; width: min(100%, 520px); } .sp-card-pieces { height: 124px; } }

/* ---------- /manual: six pieces, twelve outfits, on a sheet of paper ---------- */
.sp-cap-sheet { margin: 22px 0 0; padding: 18px 16px 16px; background: #FFFDF8; color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 26px 28px -16px rgba(0, 0, 0, .75); max-width: 460px; }
.sp-mc-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry-dark); }
.sp-cap-row { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 16px; align-items: center; }
.sp-cap-row svg { display: block; width: 100%; height: auto; }
.sp-mc-sum { display: flex; gap: 28px; margin-top: 14px; }
.sp-cap-n { margin: 0; display: grid; gap: 2px; font: 700 12.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sp-cap-n b { font: 400 clamp(54px, 15vw, 80px)/.9 var(--serif); letter-spacing: -.02em; color: var(--berry-dark); font-variant-numeric: tabular-nums; }

/* a pulled quote of the page, under a pain */
.sp-zoom-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-card-line[hidden] { display: none; }
.sp-cross { margin: 26px 0 0; max-width: 38em; font: 400 16.5px/1.55 var(--sans); color: var(--t2); }

/* the printable sheet of /kit is a real page of the product: it keeps its paper under the light, and its print rules (only the sheet prints) */
.kit-product { background: var(--paper) url(/img/collage/paper.webp) repeat; color: var(--ink); padding-bottom: 30px; box-shadow: 0 -1px 0 var(--line); }
.kit-product a { color: var(--berry); }
.kit-product :focus-visible { outline-color: var(--berry); }
@media (prefers-reduced-motion: reduce) {
  .sp-pick a, .sp-card-piece, .sp-skin-chip { transition: none; }
  .sp-skin-panel.is-new .sp-page, .sp-skin-panel.is-new .sp-skin-text { animation: none; }
}
@media print { .sp-bar, .sp-card-pieces { display: none; } .kit-page main > :not(.sh-wrap), .kit-page .sh-wrap > :not(.kit-product) { display: none !important; } }