/* NEPIDON V5 layer — same art direction as V4 (ink, ivory, champagne; Marcellus, Hanken).
   New: the hero sequence, Mis palabras (teaser, letter, engraving), the classic pen preview, the creations in full proportions. */

/* ---------- 1 · hero: signature → hold → zoom and darken → title → subtitle (about three screens of scroll) ---------- */
.hero5 { height: 400vh; height: 400svh; }
.hero5 .hero4__img { transform: scale(calc(1 + .09 * var(--z, 0))); transform-origin: 50% 46%; }
.hero5__dark { position: absolute; inset: 0; background: #0a0907; opacity: calc(var(--z, 0) * .52); pointer-events: none; }
.hero5__mark { position: relative; z-index: 2; display: grid; justify-items: center; transform: translateY(calc(var(--z, 0) * -5vh)); }
.hero5 .sig--hero { margin-top: 0; transform: scale(calc(1 - .14 * var(--z, 0))); transform-origin: 50% 70%; }
.hero5__words { margin-top: clamp(4px, 1.5vh, 18px); display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 14px); text-align: center; padding: 0 var(--g); }
.hero5__t { margin: 0; font: 400 clamp(1.7rem, 1.1rem + 2.6vw, 3.2rem)/1.12 var(--display); color: var(--on-shade); opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 18px)); }
.hero5__s { margin: 0; font: 500 clamp(.74rem, .66rem + .35vw, .95rem)/1.5 var(--text); letter-spacing: .24em; text-transform: uppercase; color: #d8c6a2; opacity: var(--s, 0); transform: translateY(calc((1 - var(--s, 0)) * 12px)); }
.hero5 .hero4__cue { opacity: calc(1 - var(--p, 0) * 6); }
.hero5.hero4--static { height: auto; }
.hero5.hero4--static .hero4__stage { min-height: 100svh; }
@media (max-aspect-ratio: 4/5) {
  .hero5 { height: 360vh; height: 360svh; }
  .hero5 .sig--hero { width: 86vw; margin-top: 0; }
  .hero5__mark { margin-top: -8vh; }
}

/* ---------- 2 · creations: every photograph in its own proportions (no cropped heads, no cut pens) ---------- */
.cre--side .cre__img img { aspect-ratio: 1; }
@media (min-width: 821px) {
  .cres__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .cre--lead .cre__img img { aspect-ratio: 1080 / 1920; }
}
@media (max-width: 820px) {
  .cres__grid { grid-template-columns: minmax(0, 1fr); }
  .cre--side { grid-template-columns: minmax(0, 1fr); }
  .cre--lead .cre__img img { aspect-ratio: 4 / 5; object-position: 50% 38%; }
}

/* ---------- 3 · Mis palabras on the home page ---------- */
.mp-teaser { background: var(--shade); color: var(--on-shade); }
.mp-teaser__in { max-width: var(--max); margin: 0 auto; padding: clamp(96px, 12vw, 180px) var(--g) clamp(64px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.mp-kicker { margin: 0 0 10px; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.mp-teaser__name { margin: 0 0 clamp(26px, 3vw, 40px); font: italic 500 clamp(2.6rem, 1.6rem + 4vw, 4.6rem)/1 "Cormorant Garamond", Georgia, serif; color: #e9dcc0; }
.mp-teaser .pal-line { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem); }
.mp-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; margin-top: clamp(32px, 4vw, 52px); padding: 0 30px; background: var(--on-shade); color: var(--shade); text-decoration: none; font: 600 .875rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase; transition: background .25s, transform .25s var(--ease-out); }
.mp-cta:hover { background: #fff; } .mp-cta:active { transform: scale(.98); }
.mp-cta:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.mp-teaser__note { margin: 16px 0 0; font-size: .9rem; color: var(--on-shade-2); }
.mp-teaser__letter { display: block; justify-self: center; width: min(100%, 440px); }
.mp-teaser__letter img { display: block; width: 100%; height: auto; aspect-ratio: 941 / 1672; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35); }
.mp-value { margin: 0 auto; max-width: var(--max); padding: 0 var(--g) clamp(96px, 11vw, 160px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.mp-value .sig { width: 150px; height: auto; fill: var(--on-shade-2); opacity: .8; }
.mp-value blockquote { margin: 0; max-width: 46ch; font-size: .95rem; line-height: 1.6; color: var(--on-shade-2); }
@media (prefers-reduced-motion: no-preference) {
  .mp-teaser .pal-line { clip-path: inset(0 100% 0 0); opacity: .2; transition: clip-path 1s var(--ease-out), opacity 1s ease, color .8s ease; }
  .mp-teaser.on .pal-line { clip-path: inset(0 0 0 0); opacity: 1; }
  .mp-teaser.on .pal-line[data-i="1"] { transition-delay: .5s; } .mp-teaser.on .pal-line[data-i="2"] { transition-delay: 1s; }
  .mp-teaser__letter img { opacity: 0; transform: translateY(24px) rotate(1.2deg); transition: opacity 1.2s ease .4s, transform 1.4s var(--ease-out) .4s; }
  .mp-teaser.on .mp-teaser__letter img { opacity: 1; transform: rotate(1.2deg); }
}
@media (max-width: 820px) {
  .mp-teaser__in { grid-template-columns: minmax(0, 1fr); }
  .mp-teaser__letter { width: min(78vw, 360px); }
  .mp-cta { width: 100%; justify-content: center; padding: 0 18px; letter-spacing: .14em; }
}

/* the case, whole: the official photograph in its own proportions */
.g5-bridge { background: var(--paper); }
.g5-bridge__in { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 11vw, 160px) var(--g); display: grid; gap: clamp(28px, 4vw, 52px); }
.g5-bridge__hd { max-width: 62ch; } .g5-bridge__hd .h2 { margin: 0 0 12px; } .g5-bridge__hd .lead { margin: 0; color: var(--ink-2); }
.g5-case { position: relative; margin: 0; }
.g5-case__img { display: block; width: 100%; height: auto; aspect-ratio: 1712 / 919; }

/* ---------- 4 · the letter ---------- */
.pal--letter .pal__in { max-width: 680px; align-content: start; }
.mp-letter { display: grid; justify-items: center; gap: clamp(22px, 3vw, 32px); text-align: center; }
.mp-letter__fig { margin: 0; width: min(100%, 560px); aspect-ratio: 941 / 1672; background: #e8e1d3; display: grid; place-items: center; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35); }
.mp-letter__fig img { display: block; width: 100%; height: auto; }
.mp-letter__wait { color: #5d574c; font-size: .9rem; }
.mp-letter__act { display: grid; justify-items: center; gap: 14px; width: min(100%, 420px); }
.mp-letter__act .btn { width: 100%; }
#mp-share, .mp-keep__cta { letter-spacing: .16em; text-transform: uppercase; }
#mp-dl { color: var(--on-shade-2); font-size: .875rem; }
.mp-keep { width: 100%; margin-top: clamp(20px, 4vw, 40px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line-shade); display: grid; justify-items: center; gap: 14px; }
.mp-keep__t { margin: 0; font: 400 clamp(1.25rem, 1rem + 1.2vw, 1.9rem)/1.25 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #e9dcc0; text-wrap: balance; }
.mp-keep__l { margin: 0; max-width: 44ch; color: var(--on-shade-2); }
.mp-keep__cta { margin-top: 8px; white-space: nowrap; }
@media (max-width: 480px) { #mp-share, .mp-keep__cta { letter-spacing: .08em; font-size: .8125rem; padding-inline: 14px; } .mp-keep__cta { width: 100%; } }

/* ---------- 5 · the emotional engraving page ---------- */
.g5-page { background: var(--ivory); }
.g5-page__in { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--g) clamp(80px, 9vw, 120px); }
.g5-page__hd { max-width: 60ch; margin-bottom: clamp(24px, 3vw, 40px); }
.g5-page__hd .h2 { outline: none; margin: 0 0 10px; } .g5-page__hd .lead { margin: 0; color: var(--ink-2); }
.g5-view { position: relative; overflow: hidden; background: #2b2119; }
.g5-view.zoom .g5-case { position: absolute; max-width: none; }
.g5-view.zoom .g5-case__img { width: 100%; }
/* the engraving: the same outlines as the laser file, darkened into the brushed metal (no shadow, no relief) */
.g5-etch { position: absolute; overflow: visible; pointer-events: none; fill: rgba(46, 36, 28, .78); mix-blend-mode: multiply; }
.g5-viewbar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.g5-viewbar p { margin: 0; color: var(--ink-3); }
.g5-viewbar .linkbtn { min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.g5-err { margin: 12px 0 0; color: #8a2b1c; }
.g5-disc { margin: 6px 0 0; max-width: 70ch; }
.g5-print { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(20px, 3vw, 32px); background: var(--paper); }
.g5-print__img img { display: block; width: 100%; height: auto; aspect-ratio: 941 / 1672; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.g5-print p { margin: 0 0 6px; color: var(--ink-2); max-width: 56ch; }
.g5-print__t { font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.3 var(--display); color: var(--ink) !important; }
.g5-classic { margin: 6px 0 4px; border-top: 1px solid var(--stone-joint); padding-top: 12px; }
.g5-classic summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.g5-classic .field { margin-top: 12px; }
.g5-own { margin-top: 32px; }
@media (max-width: 560px) { .g5-print { grid-template-columns: 84px minmax(0, 1fr); } }

/* ---------- 6 · product pages: the initials on the official pen photo ---------- */
.pen5 { position: relative; margin: 14px 0 6px; background: #1c1712; }
.pen5 img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.pen5__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pen5__ink text { fill: rgba(78, 60, 44, .88); mix-blend-mode: multiply; }
.pen5__note.err { color: #8a2b1c; }
.pen5__ink text.classic { font-family: "Libre Baskerville", Georgia, "Times New Roman", serif; }
.pen5__ink text.hand { font-family: var(--script); }

/* ================= V6 ================= */
/* home · "Objetos para escribir." before the photographs, "Piezas para conservar." and the link after them */
.uni6__in { max-width: var(--max); margin: 0 auto; padding: clamp(84px, 10vw, 150px) var(--g) clamp(72px, 9vw, 130px); display: grid; gap: clamp(28px, 4vw, 56px); }
.uni6__open, .uni6__keep { margin: 0; font: 400 clamp(1.7rem, 1.1rem + 2.3vw, 3.1rem)/1.1 var(--display); text-wrap: balance; }
.uni6__keep { color: var(--on-shade-2); }
.uni6__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 28px); align-items: end; }
.uni6__grid figure { margin: 0; } .uni6__grid img { display: block; width: 100%; object-fit: cover; }
.uni6 .uni__a, .uni6 .uni__b, .uni6 .uni__c { margin: 0; grid-row: auto; }
.uni6 .uni__a img, .uni6 .uni__c img { aspect-ratio: 9 / 16; } .uni6 .uni__b img { aspect-ratio: 5 / 4; }
.uni6__close { justify-self: end; display: grid; justify-items: end; gap: 12px; text-align: right; }
.uni6__link { color: var(--on-shade); font-size: .95rem; letter-spacing: .02em; }
@media (max-width: 820px) {
  .uni6__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .uni6 .uni__b { grid-column: 1 / -1; grid-row: 1; }
  .uni6 .uni__c { margin-top: 14%; }
  .uni6__close { justify-self: start; justify-items: start; text-align: left; }
}

/* home · teaser: an invitation letter photographed on the dark desk, its edges melting into the section (no frame, no box) */
.mp-teaser__letter img { box-shadow: none !important;
  /* only the photograph's own dark desk is faded at its outer border, so the torn paper keeps its real edges and the
     image has no rectangular frame against the section */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }

/* home · the engraved case */
.g6-bridge { background: var(--paper); }
.g6-bridge__in { max-width: var(--max); margin: 0 auto; padding: clamp(84px, 10vw, 150px) var(--g); display: grid; gap: clamp(24px, 3.4vw, 44px); }
.g6-bridge__hd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; }
.g6-bridge__hd .h2 { margin: 0; }
.g6-bridge__l p { margin: 0; font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 40ch; }
.g6-bridge__l p + p { color: var(--ink); }
.g6-bridge__fig { margin: 0; display: grid; gap: 12px; }
.g6-case__img { display: block; width: 100%; height: auto; aspect-ratio: 1712 / 919; }
.g6-bridge__fig figcaption { font-size: .85rem; color: var(--ink-3); }
@media (max-width: 820px) { .g6-bridge__hd { grid-template-columns: minmax(0, 1fr); } }

/* Mis palabras · the top of the case: tone on tone, like the logo's own engraving (no black, no shadow) */
.g6-case { position: relative; margin: 0; }
.g5-view.zoom .g6-case { position: absolute; max-width: none; }
.g6-etch { position: absolute; overflow: visible; pointer-events: none; fill: rgba(92, 52, 38, .52); mix-blend-mode: multiply; }

/* Mis palabras · the product sheet under the selection */
.g6-sheet { margin-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--stone-joint); padding-top: clamp(24px, 3vw, 36px); outline: none; }
.g6-sheet__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.g6-sheet__img { margin: 0; background: #fff; } .g6-sheet__img img { display: block; width: 100%; height: auto; }
.g6-sheet__buy { position: static; padding: 0; }
.g6-sheet__buy .buy__name { margin: 0 0 6px; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.15 var(--display); }
.g6-recap { margin: 8px 0 4px; padding: 16px 18px; background: var(--paper); display: grid; gap: 8px; }
.g6-recap__t { margin: 0; font: 600 .78rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #66522f; }
.g6-recap dl { margin: 0; display: grid; gap: 8px; }
.g6-recap dt { font-size: .75rem; color: var(--ink-3); } .g6-recap dd { margin: 2px 0 0; font: italic 400 1.15rem/1.35 "Cormorant Garamond", Georgia, serif; color: var(--ink); }
.g6-recap dd.num { font: 500 .9rem/1.3 var(--text); font-style: normal; letter-spacing: .04em; }
.g6-specs { margin-top: 6px; } .g6-specs summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.g6-change { justify-self: start; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--champagne); }
@media (max-width: 820px) { .g6-sheet__in { grid-template-columns: minmax(0, 1fr); } .g6-sheet__img { max-width: 420px; } }

/* footer · social */
.ftr .social, .social { list-style: none; margin: 18px 0 0 -12px; padding: 0; display: flex; flex-direction: row; gap: 4px; }
.ftr .social li { margin: 0; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--on-shade-2); border-radius: 50%; transition: color .2s; }
.social a:hover, .social a:focus-visible { color: var(--on-shade); }
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.social a[aria-label="Facebook"] svg { stroke-width: 1.2; }

/* contact · two areas */
.ct6 { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 72px) var(--g) clamp(72px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ct6__img { margin: 0; position: sticky; top: calc(var(--hdr-h, 72px) + 24px); } .ct6__img img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; }
.ct6__t { margin: 0 0 18px; font: 400 clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem)/1.1 var(--display); text-wrap: balance; }
.ct6__l p { margin: 0 0 6px; color: var(--ink-2); font-size: clamp(1rem, .96rem + .2vw, 1.12rem); line-height: 1.6; max-width: 44ch; }
.ct6__l p + p { color: var(--ink); }
.ct6__form { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 16px; }
.ct6__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct6__topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct6__topics legend { padding: 0; margin-bottom: 10px; font-size: .875rem; color: var(--ink-2); }
.chip6 { position: relative; } .chip6 input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip6 span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--stone-joint); font-size: .9rem; }
.chip6 input:checked + span { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.chip6 input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }
.ct6__err { margin: 0; min-height: 1.2em; color: #8a2b1c; font-size: .875rem; }
.ct6__alt { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--stone-joint); font-size: .9rem; color: var(--ink-2); } .ct6__alt p { margin: 0 0 6px; }
@media (max-width: 820px) { .ct6 { grid-template-columns: minmax(0, 1fr); } .ct6__img { position: static; order: 2; } .ct6__img img { aspect-ratio: 16 / 10; } .ct6__row { grid-template-columns: minmax(0, 1fr); } }

/* help · discreet, bottom right, raised above the product page's sticky bar */
.help6 { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 40px; padding: 0 16px; border: 1px solid rgba(239, 233, 221, .28); border-radius: 20px; background: rgba(18, 16, 13, .86); color: var(--on-shade); font: 500 .8rem/1 var(--text); letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(6px); transition: transform .3s var(--ease-out), opacity .3s; }
.help6:hover { background: #12100d; }
.help6.is-over { opacity: 0; pointer-events: none; } .help6:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
body:has(.sticky-buy.on) .help6 { transform: translateY(calc(-1 * var(--sticky-h, 72px))); }
body:has(.bag.on) .help6, body:has(.dlg) .help6, .is-home:has(.hero4__stage) .help6.hide { opacity: 0; pointer-events: none; }
.help6__list details { border-bottom: 1px solid var(--stone-joint); } .help6__list summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.help6__a { padding: 0 0 12px; font-size: .92rem; line-height: 1.6; color: var(--ink-2); } .help6__a p { margin: 0 0 8px; }
@media (max-width: 820px) {
  .help6 { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; }
  .help6::before { content: "?"; font: 500 1.05rem/1 var(--display); }
}

/* ================= V8 ================= */
/* the case engraving: route A / B inside the product sheet */
.g8-swap { justify-self: start; min-height: 40px; color: var(--ink-2); font-size: .9rem; text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.g8-a { display: grid; gap: 6px; } .g8-a dl { margin: 0; display: grid; gap: 8px; }
.g8-b { display: grid; gap: 12px; }
.g8-mini { position: relative; margin: 2px 0 0; background: #2b2119; } .g8-mini img { display: block; width: 100%; height: auto; aspect-ratio: 1712 / 919; }
.g8-in { font: italic 400 1.12rem/1.4 "Cormorant Garamond", Georgia, serif; resize: vertical; min-height: 0; }
.g8-st { display: block; min-height: 1.3em; margin-top: 4px; color: var(--ink-3); } .g8-st.bad { color: #8a2b1c; }
.g8-ref { margin: 4px 0 0; }
.g8-edge { position: relative; display: grid; gap: 6px; }
.g8-edge .counter { position: absolute; right: 0; top: 0; font-size: .75rem; color: var(--ink-3); }

/* the notebook: an editorial continuation, not a pop-up */
.lb8 { background: var(--ivory); }
.lb8__in { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--g) clamp(72px, 9vw, 120px); }
.lb8__in--empty { max-width: 640px; display: grid; gap: 16px; justify-items: start; padding-top: clamp(56px, 8vw, 110px); }
.lb8__done { margin: 0 0 clamp(22px, 3vw, 36px); color: #2f5a2a; } .lb8__done span { margin-right: 4px; }
.lb8__hd { max-width: 860px; margin-bottom: clamp(22px, 3vw, 40px); }
.lb8__t { margin: 6px 0 12px; font: 400 clamp(1.8rem, 1.2rem + 2.1vw, 3rem)/1.1 var(--display); text-wrap: balance; outline: none; }
.lb8__l { margin: 0; font: italic 400 clamp(1.25rem, 1.1rem + .7vw, 1.6rem)/1.35 "Cormorant Garamond", Georgia, serif; color: var(--ink-2); }
.lb8__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.lb8__fig { position: relative; margin: 0; background: #fff; position: sticky; top: calc(var(--hdr-h, 72px) + 20px); }
.lb8__fig img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: opacity .35s ease; }
.lb-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the laser mark, tone on tone per cover colour (calibrated on the owner's engraved camel references): darker where the
   cover is pressed, a faint light lip on the lower edge; no colour of its own */
.lb-ink__cut { fill: rgba(84, 26, 0, .58); mix-blend-mode: multiply; }   /* V9: warmer, as on the owner's Café references */
.lb-ink__lip { fill: rgba(255, 232, 208, .1); mix-blend-mode: screen; }
[data-v^="azul"] .lb-ink__cut { fill: rgba(0, 4, 14, .5); } [data-v^="azul"] .lb-ink__lip { fill: rgba(190, 205, 235, .07); }
[data-v^="morado"] .lb-ink__cut { fill: rgba(40, 0, 6, .55); } [data-v^="morado"] .lb-ink__lip { fill: rgba(255, 200, 200, .08); }
.lb8__side { display: grid; gap: 22px; }
.lb8__story { margin: 0; max-width: 46ch; color: var(--ink-2); line-height: 1.65; }
.lb8__invite { display: grid; gap: 12px; justify-items: start; }
.lb8__price { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink-2); } .lb8__price b { color: var(--ink); font-weight: 500; }
.lb8__invite .btn { max-width: 420px; }
.lb8__skip { min-height: 44px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 4px; }
.lb8__cfg { display: grid; gap: 22px; }
.lb8__set { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.lb8__set legend { padding: 0; margin-bottom: 10px; font: 600 .78rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #66522f; }
.lb8__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lb8__color, .lb8__fin, .lb8__opt { position: relative; cursor: pointer; }
.lb8__color input, .lb8__fin input, .lb8__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lb8__thumb { display: block; background: #fff; border: 1px solid var(--stone-joint); transition: border-color .2s, box-shadow .2s; } .lb8__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.lb8__cn { display: block; margin-top: 6px; font-size: .875rem; text-align: center; }
.lb8__color input:checked + .lb8__thumb { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lb8__color input:focus-visible + .lb8__thumb, .lb8__fin input:focus-visible + .lb8__fbox, .lb8__opt input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }
.lb8__finishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lb8__fbox { display: grid; gap: 4px; padding: 14px 16px; min-height: 100%; border: 1px solid var(--stone-joint); background: #fff; transition: border-color .2s, box-shadow .2s; }
.lb8__fin input:checked + .lb8__fbox { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lb8__fn { font: 400 1.15rem/1.2 var(--display); } .lb8__fp { font-weight: 500; } .lb8__fd { font-size: .82rem; line-height: 1.5; color: var(--ink-3); }
.lb8__opt span { display: grid; gap: 2px; padding: 12px 14px 12px 42px; border: 1px solid var(--stone-joint); background: #fff; min-height: 48px; align-content: center; position: relative; }
.lb8__opt span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1px solid var(--ink-3); border-radius: 50%; }
.lb8__opt input:checked + span { border-color: var(--ink); } .lb8__opt input:checked + span::before { border-color: var(--ink); box-shadow: inset 0 0 0 4px #fff; background: var(--ink); }
.lb8__title { font: italic 400 1.15rem/1.35 "Cormorant Garamond", Georgia, serif; color: var(--ink-2); }
.lb8__own { position: relative; display: grid; gap: 6px; } .lb8__own .counter { position: absolute; right: 0; top: 0; font-size: .75rem; color: var(--ink-3); }
.lb8__own .input { font: italic 400 1.15rem/1.3 "Cormorant Garamond", Georgia, serif; }
.lb8__st { margin: 0; min-height: 1.3em; color: var(--ink-3); } .lb8__st.bad { color: #8a2b1c; }
.lb8__sum { padding: 16px 18px; background: var(--paper); } .lb8__sum dl { margin: 0; display: grid; gap: 8px; } .lb8__sum dt { font-size: .75rem; color: var(--ink-3); } .lb8__sum dd { margin: 2px 0 0; }
.lb8__eng { font: italic 400 1.15rem/1.35 "Cormorant Garamond", Georgia, serif; }
@media (prefers-reduced-motion: no-preference) { .lb8.is-open .lb8__cfg { animation: lbIn .5s var(--ease-out) both; } @keyframes lbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }
@media (max-width: 820px) {
  .lb8__grid { grid-template-columns: minmax(0, 1fr); }
  .lb8__fig { position: relative; top: 0; }
  /* while configuring on a phone, the notebook stays in view (compact), so every change is seen at once */
  .lb8.is-open .lb8__fig { position: sticky; top: calc(var(--hdr-h, 64px) + 4px); z-index: 5; height: 34vh; height: 34svh; box-shadow: 0 10px 24px -18px rgba(0,0,0,.4); }
  .lb8.is-open .lb8__fig img { height: 100%; width: 100%; object-fit: contain; aspect-ratio: auto; }
  .lb8__finishes { grid-template-columns: minmax(0, 1fr); }
}
/* bag: the notebook line and its tie to the pen */
.line--lb .line__name::after { content: ""; }
.line__prov { color: #6a4e14; }
.line__ask { margin-top: 10px; padding: 12px; background: var(--paper); font-size: .85rem; } .line__ask p { margin: 0 0 10px; }
.line__askb { display: flex; flex-wrap: wrap; gap: 8px; } .line__askb .btn { min-height: 40px; padding: 0 14px; font-size: .8rem; }
.g6-bridge__fig figcaption { display: none; }

/* the hidden attribute always wins over a component display rule (V8 fix: editor, notebook steps, fields) */
[hidden] { display: none !important; }

/* ================= V9 ================= */
/* El oficio · the engraving photograph (owner's photo, shown whole and in colour on its own white) */
.vs__img--grabado { background: #fff; display: grid; place-items: center; }
.vs__img--grabado img { width: 100%; height: auto; object-fit: contain; filter: none; aspect-ratio: 1692 / 840; }
.g6-bridge__own { margin-top: 14px !important; font: italic 400 clamp(1.05rem, .98rem + .35vw, 1.25rem)/1.45 "Cormorant Garamond", Georgia, serif !important; color: var(--ink-2) !important; }

/* bag · confirmation after an add */
.bag__ok { margin: 0; padding: 12px var(--g, 20px); background: #e6eddc; color: #2f5a2a; font-size: .9rem; border-bottom: 1px solid var(--stone-joint); }
.bag__ok span { margin-right: 4px; }

/* Mis palabras · the engraving choice as two quiet cards */
.g9-choice { border: 0; margin: 2px 0 4px; padding: 0; display: grid; gap: 10px; }
.g9-q { padding: 0; font: italic 400 1.2rem/1.3 "Cormorant Garamond", Georgia, serif; color: var(--ink); }
.g9-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g9-card { position: relative; cursor: pointer; }
.g9-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.g9-card__b { display: grid; gap: 4px; height: 100%; padding: 12px 14px 12px 36px; background: #fff; border: 1px solid var(--stone-joint); position: relative; transition: border-color .2s, box-shadow .2s; }
.g9-card__b::before { content: ""; position: absolute; left: 13px; top: 15px; width: 13px; height: 13px; border: 1px solid var(--ink-3); border-radius: 50%; }
.g9-card__b b { font-weight: 500; font-size: .92rem; } .g9-card__b span { font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
.g9-card input:checked + .g9-card__b { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.g9-card input:checked + .g9-card__b::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.g9-card input:focus-visible + .g9-card__b { outline: 2px solid var(--champagne); outline-offset: 2px; }
@media (max-width: 420px) { .g9-cards { grid-template-columns: minmax(0, 1fr); } }

/* Notebook · invitation with the official photograph, then configuration, then a clear ready state */
.lb9-invite { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lb9-invite__fig { margin: 0; } .lb9-invite__fig img { display: block; width: 100%; height: auto; aspect-ratio: 1275 / 1233; }
.lb9-invite__txt { display: grid; gap: 12px; align-content: center; max-width: 520px; }
.lb9-invite__txt .lb8__t { margin: 0; } .lb9-invite__txt .lb8__l { margin: 0; }
.lb9-invite__p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.65; }
.lb9-invite__line { margin: 0; font: 600 .78rem/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #66522f; }
.lb9-invite__a { display: grid; gap: 6px; justify-items: start; margin-top: 6px; } .lb9-invite__a .btn { max-width: 420px; }
.lb9-cfg__t { margin: 4px 0 0; font: 400 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.2 var(--display); }
.lb9-ready { max-width: 640px; display: grid; gap: 14px; padding: clamp(40px, 7vw, 96px) 0; }
.lb9-ready .lb8__t { margin: 0; } .lb9-ready__l { margin: 0; font-size: 1.05rem; color: var(--ink-2); }
.lb9-ready__a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 820px) {
  .lb9-invite { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lb9-invite__txt { max-width: none; } .lb9-invite__a .btn { max-width: none; width: 100%; }
}
.lb8--ready { min-height: calc(100vh - var(--hdr-h, 72px)); min-height: calc(100svh - var(--hdr-h, 72px)); }

/* ================= V10 ================= */
/* El oficio · the two photographs at the same height, each column as wide as its photograph's own proportions
   (filigree 1158 × 858, engraving 1692 × 778 once its empty top strip is cropped): no white band, no frame, no distortion */
.vs__grid--v10 { grid-template-columns: minmax(0, 1350fr) minmax(0, 2175fr); align-items: start; }
.vs__img--v10 { aspect-ratio: auto; overflow: visible; background: none; }
.vs__img--v10 img { display: block; width: 100%; height: auto; object-fit: initial; filter: none; }
@media (max-width: 600px) { .vs__grid--v10 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 820px) { .vs__grid--v10 { grid-template-columns: minmax(0, 1350fr) minmax(0, 2175fr); gap: 16px; } }

/* Phase 2.4 · shop message in the bag (same component as the confirmation) */
.bag__ok--err { color: var(--ink, #1c1a16); }