/* The pages of the three small digital products in the shop: /phone-palette, /makeup-kit and /neighbors (oct 2026, docs/web/SECCIONES.md "Tienda"; docs/web/PAGINAS-PRODUCTO.md).
   Built by tools/product_pages.py, moved by site/js/product.js and site/js/shop.js. Loaded after site/css/magazine.css and site/css/shop.css (the showcase, the books, the phone, the tour, the split
   screens, the spec sheet, the $0, the chat and the close are there); everything here is what only these three pages have: the season picker, the pigment still life, the color check, the two
   seasons held to her face, and the comparisons of the math bands. Everything works without JavaScript and with prefers-reduced-motion: the chips are links, each control shows its plain
   sentence. Motion is transform and opacity only. */

.product-page .sh-tint { background: color-mix(in srgb, var(--glow) 7%, var(--ink)); }
.pp-sub { max-width: 34em; margin: 0; font: 400 clamp(18px, .6vw + 16px, 21px)/1.42 var(--sans); color: var(--t2); }
.pp-cta { margin: 14px 0 0; }
.pp-note { margin: 10px 0 0; max-width: 30em; font: 400 15.5px/1.4 var(--sans); color: var(--t3); }
.pp-note:empty { display: none; }
.pp-note--close { color: var(--t3); }
.pp-cross { margin: 26px 0 0; max-width: 38em; font: 400 16.5px/1.55 var(--sans); color: var(--t2); }
.sh-buy .pp-cta { margin-top: 14px; }

/* the picker: the 12 seasons in one row you swipe on a phone, all of them wrapped on a wide screen */
.pp-pick { margin-top: 12px; }
.pp-pick-row { margin: 0 0 2px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pp-pick-l { font: 700 12.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--t3); }
.pp-pick-test { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px -8px; font: 700 15px/1.2 var(--sans); color: var(--paper); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.pp-chips { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.pp-chips::-webkit-scrollbar { display: none; }
.pp-chips li { flex: none; scroll-snap-align: start; }
.pp-chips li:last-child { padding-right: 36px; }
.pp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 5px 11px; border: 1.5px solid rgba(247, 241, 232, .5); border-radius: 999px; background: transparent; color: var(--paper); font: 600 16px/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, transform .5s var(--mz-spring); }
.pp-chip:hover { color: var(--paper); text-decoration: none; border-color: var(--paper); }
.pp-chip:active { transform: scale(.96); }
.pp-chip i { flex: none; width: 15px; height: 15px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(247, 241, 232, .6); }
.pp-chip[aria-checked="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.pp-chip[aria-checked="true"] i { box-shadow: 0 0 0 1.5px var(--ink); }
.pp-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pp-nb { margin-top: 8px; }
.pp-nb[hidden] { display: none; }
.pp-pairs-static { display: none; list-style: none; margin: 10px 0 0; padding: 0; }
html:not(.js) .pp-pairs-static { display: block; }
.pp-pairs-static a { display: inline-flex; min-height: 44px; align-items: center; }
html:not(.js) .pp-chips--nb { display: none; }
@media (min-width: 900px) { .pp-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 8px; -webkit-mask-image: none; mask-image: none; } .pp-chips li:last-child { padding-right: 0; } }
.pp-headsup[hidden] { display: none; }
.pp-seeit { margin-left: 4px; font-weight: 700; white-space: nowrap; }

/* the Makeup Kit: the phone stands over the season's pigment still life (a mood picture, never color data) */
.sh-dev--over { min-height: 372px; }
.mk-still { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 0; height: 262px; margin: 0; overflow: hidden; }
.mk-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-still { -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 42%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 42%, transparent 100%); }
.mk-still img { filter: brightness(.82) saturate(1.05); }
.sh-dev--over .sh-scene { position: relative; z-index: 1; padding-top: 74px; }
.sh-dev--over .ph { --pw: min(46vw, 176px); }
.sh-dev--over .ph-dots { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .sh-dev--over { min-height: 560px; }
  .mk-still { left: 0; right: 0; height: 400px; border-radius: 3px; }
  .sh-dev--over .sh-scene { padding-top: 120px; }
  .sh-dev--over .ph { --pw: min(21vw, 250px); }
}

/* ---------- the control of the Phone Palette: a color against her palette ---------- */
.pp-static { margin-top: 14px; max-width: 34em; font: 400 18px/1.45 var(--sans); color: var(--t2); }
.js .pp-static { display: none; }
.js .pp-static[hidden], .pp-check[hidden], .pp-drape[hidden] { display: none; }
.pp-sample { margin: 0; min-height: 1.4em; font: 600 15.5px/1.4 var(--sans); color: var(--t2); }
.pp-sample:empty { display: none; }
.pp-sample a { color: var(--paper); }
.pp-fine { margin-top: 16px; max-width: 34em; font: 400 16px/1.45 var(--sans); color: var(--t3); }
.pp-check { display: grid; gap: 14px; margin-top: 20px; max-width: 680px; }
.pp-in { display: flex; gap: 14px; align-items: end; }
.pp-pickcolor input { display: block; width: 68px; height: 58px; padding: 0; border: 1.5px solid rgba(247, 241, 232, .6); border-radius: 3px; background: none; cursor: pointer; }
.pp-hexrow { flex: 1; min-width: 0; }
.pp-hexrow label { display: block; margin-bottom: 4px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.pp-hexrow input { width: 100%; min-height: 58px; padding: 6px 12px; border: 1.5px solid rgba(247, 241, 232, .6); border-radius: 3px; background: rgba(247, 241, 232, .06); color: var(--paper); font: 600 20px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; }
.pp-hexrow input[aria-invalid="true"] { border-color: #F0A0A0; }
.pp-hexrow input:focus-visible, .pp-pickcolor input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pp-tries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pp-try { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 5px 11px; border: 1.5px solid rgba(247, 241, 232, .5); border-radius: 999px; background: transparent; color: var(--paper); font: 600 16px/1.1 var(--sans); cursor: pointer; }
.pp-try i { width: 15px; height: 15px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(247, 241, 232, .6); }
.pp-try:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pp-out { border-top: 1px solid var(--line); padding-top: 14px; }
.pp-pairsw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-sw { position: relative; height: clamp(150px, 40vw, 190px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 10px; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(247, 241, 232, .25); }
.pp-sw span, .pp-sw b { display: block; max-width: 100%; padding: 5px 9px 4px; background: var(--paper); color: var(--ink); font: 600 14.5px/1.25 var(--sans); }
.pp-sw b { padding-top: 0; font: 400 13.5px/1.25 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.pp-stamp { margin: 14px 0 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pp-stamp[data-tier="yes"] { color: #9FD8B8; }
.pp-say { margin: 6px 0 0; max-width: 34em; font: 400 clamp(18px, .5vw + 16px, 20px)/1.45 var(--sans); color: var(--paper); }
@media (min-width: 900px) { .pp-sw { height: 200px; } }

/* ---------- the control of the Neighbors pack: two seasons held to her face ---------- */
.pp-static--pack { max-width: 640px; }
.pp-drape { display: grid; gap: 14px; margin-top: 22px; max-width: 640px; }
.pp-field { position: relative; display: flex; height: clamp(250px, 66vw, 340px); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.pp-half { display: block; flex: 1 1 0; min-width: 0; background: var(--c); transition: flex-grow .55s var(--mz-spring); }
.pp-hit { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.pp-field[data-mode="a"] .pp-half:nth-child(2), .pp-field[data-mode="b"] .pp-half:nth-child(1) { flex-grow: 0; }
.pp-tag { position: absolute; left: 10px; bottom: 10px; max-width: calc(50% - 20px); padding: 8px 11px 9px; background: var(--paper); color: var(--ink); font: 400 14.5px/1.25 var(--sans); text-align: left; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.pp-tag b { display: block; font: 400 19px/1.1 var(--serif); }
.pp-tag--b { left: calc(50% + 10px); }
.pp-field[data-mode="a"] .pp-tag, .pp-field[data-mode="b"] .pp-tag { max-width: calc(100% - 20px); }
.pp-field[data-mode="a"] .pp-tag--b, .pp-field[data-mode="b"] .pp-tag--a { display: none; }
.pp-field[data-mode="b"] .pp-tag--b { left: 10px; }
.pp-sides { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-side { min-height: 44px; padding: 6px 16px 5px; border: 1.5px solid rgba(247, 241, 232, .5); border-radius: 999px; background: transparent; color: var(--paper); font: 600 16px/1.1 var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
.pp-side[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.pp-side:focus-visible, .pp-dpair:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pp-dpairs { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.pp-dpair { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1.5px rgba(247, 241, 232, .6); cursor: pointer; transition: transform .45s var(--mz-spring), box-shadow .2s; }
.pp-dpair[aria-pressed="true"] { transform: scale(1.14); box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--paper); }
.pp-tip { margin: 0; min-height: 2.8em; font: 600 17px/1.4 var(--sans); color: var(--paper); }
.pp-dsteps { list-style: none; counter-reset: dp; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 40em; }
.pp-dsteps li { counter-increment: dp; position: relative; padding: 12px 0 13px 44px; border-bottom: 1px solid var(--line); font: 400 17px/1.45 var(--sans); color: var(--t2); }
.pp-dsteps li::before { content: counter(dp); position: absolute; left: 0; top: 7px; font: italic 400 30px/1 var(--slant); color: var(--accent); }
.pp-dp-row { margin-top: 14px; }
.pp-dp-n { margin: 0; font: 400 17px/1.4 var(--sans); color: var(--t2); }
.pp-dp-n b { color: var(--paper); }
.pp-dp-sw { list-style: none; display: flex; margin: 8px 0 0; padding: 0; }
.pp-dp-sw li { flex: 1; height: 54px; background: var(--c); }
.pp-dp-sw li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { .pp-field { height: 360px; } }

/* ---------- the math bands ---------- */
.pp-vs { display: grid; gap: 22px; margin-top: 22px; }
.pp-vs-sw li:nth-child(n+4) { display: none; }
.pp-vs-col { border-top: 1px solid var(--line); padding-top: 14px; min-width: 0; }
.pp-vs-h { margin: 0 0 12px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--t3); }
.pp-vs-sw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.pp-vs-sw li { display: grid; gap: 1px; align-content: start; min-width: 0; font: 600 14.5px/1.25 var(--sans); color: var(--paper); }
.pp-vs-i { display: block; height: 46px; margin-bottom: 4px; background: var(--c); }
.pp-vs-sw li span { font: 400 13.5px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--t3); }
.pp-vs-sw .pp-q { font: 400 24px/1 var(--serif); color: var(--t3); }
.pp-vs-else .pp-vs-sw li { min-height: 74px; }
.pp-vs-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; margin: 14px 0 0; }
.pp-vs-n dt { font: 600 14px/1.3 var(--sans); color: var(--t2); }
.pp-vs-n dd { margin: 0; font: 400 clamp(40px, 9vw, 60px)/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--paper); }
.pp-vs-else .pp-vs-n dd { color: var(--t3); }
.pp-vs-here .pp-vs-n dd { color: var(--accent); }
.pp-vs-line { margin: 24px 0 0; max-width: 32em; font: 400 clamp(18px, .5vw + 17px, 21px)/1.45 var(--sans); color: var(--paper); }
@media (min-width: 760px) { .pp-vs { grid-template-columns: 1fr 1fr; column-gap: 56px; } .pp-vs-sw li:nth-child(n+4) { display: grid; } .pp-vs-i { height: 54px; } }
.pp-bars { display: grid; gap: 18px; margin-top: 28px; max-width: 760px; }
.pp-bar-h { margin: 0 0 6px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--t3); }
.pp-bar-track { position: relative; display: flex; align-items: center; min-height: 64px; background: rgba(247, 241, 232, .08); overflow: hidden; }
.pp-bar-fill { display: flex; align-items: center; align-self: stretch; width: var(--w); background: rgba(247, 241, 232, .22); }   /* the fill holds the price, so the price always sits on its own bar */
.pp-bar-row--pack .pp-bar-fill { background: var(--accent); }
.pp-bar-fill b { padding: 0 16px; font: 400 clamp(26px, 5vw, 40px)/1.1 var(--serif); color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-bar-row--pack .pp-bar-fill b { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .js .pp-bar-fill { animation: pp-bar 1s var(--mz-spring) both; } }
@keyframes pp-bar { from { clip-path: inset(0 98% 0 0); } to { clip-path: inset(0); } }
.pp-math-dtm .dtm-ui { margin-top: 8px; }

/* ---------- the fan of the 57 colors, and the two guides side by side ---------- */
.pp-fan-wrap { margin-bottom: 18px; }
.pp-fan57 { position: relative; height: clamp(168px, 46vw, 230px); max-width: 520px; margin: 4px auto 10px; }
.pp-fan57 i { position: absolute; left: 50%; bottom: 0; width: clamp(34px, 9vw, 50px); height: clamp(120px, 34vw, 170px); margin-left: calc(clamp(34px, 9vw, 50px) / -2); background: var(--c); border: 3px solid #FFFDF8; border-radius: 2px; transform-origin: 50% 118%; transform: rotate(var(--r)); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: no-preference) {
  [data-pop="self"].pop-wait i { transform: rotate(0deg); }
  [data-pop="self"].pop-on i { transition: transform 1.1s var(--mz-spring) calc(var(--i, 0) * 12ms); }
}
.pp-cols { display: grid; gap: 22px; margin-top: 8px; }
.pp-guidecol { border-top: 1px solid var(--line); padding-top: 12px; }
.pp-gc-h { margin: 0 0 4px; font: 400 clamp(26px, 5vw, 36px)/1.1 var(--serif); color: var(--paper); }
.pp-gc-l { margin: 0; }
.pp-gc-l div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 9px; border-bottom: 1px solid var(--line); font: 400 17px/1.35 var(--sans); }
.pp-gc-l dt { color: var(--t2); }
.pp-gc-l dd { margin: 0; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .pp-cols { grid-template-columns: 1fr 1fr; gap: 56px; } }

@media (prefers-reduced-motion: reduce) { .pp-chip, .pp-half, .pp-dpair, .pp-side { transition: none; } }
@media print { .mk-still { display: none; } }