/* Noga Diamonds · Education Center v3 (assets/css/edu-v3.css)
 * Loaded by the education pages through the page metadata "styles".
 * Uses the design tokens of noga.css (colours, type scale, spacing, motion). No inline styles needed:
 * per-item values arrive as custom properties (--i, --mm) that build.mjs moves into page-styles.css.
 *  1. «Recreado / Foto real» switch (real-slider.js)      6. Certificate (como-medimos)
 *  2. Carat row, aligned with the slider labels           7. Hearts & arrows (la-talla)
 *  3. Hand to scale                                       8. Shape index cards + shape pages
 *  4. Real photo stage + honest «no photo» card           9. Small helpers
 *  5. 3D diamond (diamond3d.js)
 */

/* ---------- 1. view switch ---------- */
.rs-switch{display:none;justify-self:center;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:rgba(0,0,0,.6)}
.js .rs-switch{display:inline-flex}
.rs-switch button{min-height:36px;padding:6px 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--stone);font:inherit;font-size:var(--step--1);letter-spacing:.04em;cursor:pointer;transition:background-color var(--dur-2),color var(--dur-2)}
.rs-switch button:hover{color:var(--ivory)}
.rs-switch button[aria-pressed="true"]{background:var(--ruby);color:var(--ivory)}
.rs-switch button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
[data-view-panel][hidden]{display:none!important}
.rs-cap{display:block}

/* ---------- 2. carat row: every diamond sits right above its label ---------- */
.carat .carat__row{--n:7;position:relative;display:block;min-height:0;aspect-ratio:6/1.25;margin-inline:0}
.carat .carat__gem{position:absolute;top:50%;left:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--i) / (var(--n) - 1));width:calc((100% - var(--thumb)) / (var(--n) - 1) * var(--mm) / 10);transform:translate(-50%,-50%)}
.carat .carat__gem.is-active{transform:translate(-50%,calc(-50% - 6px))}
.carat .rs-view{display:grid;gap:var(--space-4)}

/* ---------- 3. hand to scale (assets/media-v3/mano-escala.webp: digitally created photo, 138.89 × 153.06 mm at 17.64 px/mm in the 3712 px original (crop x 600–3050, y 450–3150);
   ring-finger centre at 37.18 % / 53.37 %, finger 15 mm wide; source and measurements in project-files diamonds/mano/) ---------- */
.hand{--mm:6.5;position:relative;width:min(100%,400px);margin-inline:auto;aspect-ratio:2450/2700;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 74%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 4%,#000 74%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.hand__art{display:block;width:100%;height:auto}
.hand__gem{position:absolute;left:37.18%;top:53.37%;width:calc(var(--mm) / 138.89 * 100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px rgba(246,233,226,.55),0 2px 6px rgba(0,0,0,.7),0 0 18px rgba(246,233,226,.25);transition:width var(--dur-3) var(--ease-lux)}
.hand__gem img{display:block;width:100%;height:100%;border-radius:50%}
.carat[data-level-current="0"] .hand{--mm:4.1}
.carat[data-level-current="1"] .hand{--mm:5.2}
.carat[data-level-current="2"] .hand{--mm:5.9}
.carat[data-level-current="3"] .hand{--mm:6.5}
.carat[data-level-current="4"] .hand{--mm:7}
.carat[data-level-current="5"] .hand{--mm:8.2}
.carat[data-level-current="6"] .hand{--mm:9.4}

/* ---------- 4. real photos + honest card ---------- */
.rs-stage{min-height:clamp(240px,34vw,360px);align-items:center}
.rs-photo{display:grid;justify-items:center;gap:var(--space-3)}
.rs-photo .media-frame{width:min(78%,300px);box-shadow:0 0 0 1px var(--line-2),0 20px 50px -20px rgba(0,0,0,.9)}
.rs-photo__tag{margin:0;font-size:var(--step--1);letter-spacing:.06em;color:var(--stone)}
.rs-none{display:grid;justify-items:center;align-content:center;gap:var(--space-3);width:min(100%,360px);min-height:clamp(220px,30vw,320px);margin-inline:auto;padding:var(--space-6) var(--space-5);border:1px dashed var(--line-2);border-radius:var(--radius-sm);text-align:center;background:linear-gradient(170deg,rgba(226,199,186,.05),transparent 60%)}
.rs-none__icon{width:44px;height:44px;border:1px solid var(--gold-lo);border-radius:50%;background:linear-gradient(135deg,transparent 47%,var(--gold-lo) 48% 52%,transparent 53%)}
.rs-none__t{margin:0;font-family:var(--font-display);font-size:var(--step-2);line-height:1.15;color:var(--ivory)}
.rs-none__b{margin:0;max-width:34ch;font-size:var(--step--1);color:var(--stone)}
.c4-origin{max-width:62ch;margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-left:2px solid var(--gold);color:var(--stone);font-size:var(--step-0)}
.c4-origin i{color:var(--gold-hi);font-style:normal;font-weight:500}
.c4-origin b{color:var(--gold-hi);font-weight:500}

/* ---------- 5. 3D diamond ---------- */
.d3d{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:520px;margin-inline:auto;touch-action:pan-y}
.d3d>canvas,.d3d>.d3d__fallback{grid-area:1/1;width:100%;height:100%}
.d3d>canvas{display:block;cursor:grab}
.d3d>canvas:active{cursor:grabbing}
.d3d>.d3d__fallback{object-fit:contain;padding:8%}
.d3d.is-live>.d3d__fallback{display:none}
.d3d__pause{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:rgba(0,0,0,.72);color:var(--gold-hi);cursor:pointer;transition:border-color var(--dur-2)}
.d3d__pause:hover{border-color:var(--gold)}
.d3d__pause:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.d3d__icon{width:12px;height:14px;border-inline:3px solid currentColor;box-sizing:border-box}
.d3d__pause[aria-pressed="true"] .d3d__icon{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.d3d-stage{position:relative;padding:clamp(12px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius-sm);background:radial-gradient(70% 70% at 50% 42%,#1c0a19,var(--ink-2) 75%)}
.d3d-stage__hint{margin:var(--space-3) 0 0;text-align:center}
.d3d-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;margin:var(--space-5) 0 0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--line)}
.d3d-specs>div{padding:14px 16px;background:var(--surface)}
.d3d-specs dt{font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.d3d-specs dd{margin:4px 0 0;font-family:var(--font-display);font-size:var(--step-2);line-height:1.1;color:var(--gold-hi)}

/* ---------- 6. certificate (anonymised example) ---------- */
.cert{position:relative;margin:clamp(32px,5vw,56px) 0 0;padding:clamp(20px,3.4vw,44px);border:1px solid var(--line-2);border-radius:var(--radius-sm);background:linear-gradient(160deg,#160813,#070206 60%);box-shadow:var(--shadow-lg)}
.cert::before{content:"";position:absolute;inset:8px;border:1px solid rgba(226,199,186,.12);border-radius:2px;pointer-events:none}
.cert__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--line-2)}
.cert__title{margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--step-3);line-height:1.05;color:var(--ivory)}
.cert__sub{margin:6px 0 0;font-size:var(--step--2);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold)}
.cert__ids{display:grid;gap:6px;margin:0;font-size:var(--step--1);color:var(--stone)}
.cert__ids>div{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.cert__ids dt{color:var(--mute)}
.cert__ids dd{margin:0}
.redact{display:inline-block;min-width:7.5em;padding:1px 8px;border-radius:2px;background:repeating-linear-gradient(135deg,#2a1426 0 6px,#1c0a19 6px 12px);color:var(--mute);font-size:var(--step--2);letter-spacing:.06em;text-align:center}
.cert__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding-top:var(--space-5)}
.cert__fig{margin:0}
.cert__fig img{display:block;width:100%;height:auto}
.cert__fig figcaption{margin-top:var(--space-2);font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.cert__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-5);margin:var(--space-4) 0 0}
.cert__grid>div{display:flex;justify-content:space-between;gap:var(--space-3);padding:8px 0;border-top:1px solid var(--line);font-size:var(--step--1)}
.cert__grid dt{color:var(--stone)}
.cert__grid dd{margin:0;color:var(--ivory);font-variant-numeric:tabular-nums lining-nums;text-align:right}
.cert__facets{width:100%;margin-top:var(--space-5);border-collapse:collapse;font-size:var(--step--1);font-variant-numeric:tabular-nums lining-nums}
.cert__facets caption{caption-side:top;padding-bottom:var(--space-2);text-align:left;font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.cert__facets th,.cert__facets td{padding:7px 4px;border-top:1px solid var(--line);text-align:center;font-weight:400}
.cert__facets thead th{color:var(--mute);font-size:var(--step--2)}
.cert__facets tbody th{text-align:left;color:var(--stone);white-space:nowrap}
.cert__facets td{color:var(--ivory)}
.cert__facets .avg{color:var(--gold-hi)}
.cert__legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--step--2);color:var(--stone)}
.cert__legend li::before{content:"";display:inline-block;width:14px;height:2px;margin-right:8px;vertical-align:middle;background:var(--gold-hi)}
.cert__legend li+li::before{background:var(--stone)}
.cert__stamp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line-2);font-size:var(--step--2);color:var(--mute)}
.cert-cap{margin-top:var(--space-4);max-width:80ch;color:var(--stone)}
.cert-wrap{overflow-x:auto}
.cert-fig{margin:0}
.cert__figcap{margin:var(--space-2) 0 0;font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.cert__fig--oct{max-width:340px;margin-inline:auto}
.cert__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:860px){.cert__body{grid-template-columns:minmax(0,1fr)}.cert__ids>div{justify-content:flex-start}}
@media (max-width:480px){.cert__grid{grid-template-columns:minmax(0,1fr)}.cert__facets{font-size:var(--step--2)}.cert__facets th,.cert__facets td{padding:6px 2px}}
.measure-steps{counter-reset:ms;display:grid;gap:var(--space-4);margin:var(--space-5) 0 0;padding:0;list-style:none}
.measure-steps li{position:relative;padding-left:44px;color:var(--stone)}
.measure-steps li::before{counter-increment:ms;content:counter(ms,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--font-display);font-size:var(--step-2);line-height:1;color:var(--gold)}
.measure-steps strong{color:var(--ivory);font-weight:500}

/* ---------- 7. hearts & arrows (la-talla) ---------- */
.ha-figure{margin:0;display:grid;gap:var(--space-4)}
.ha-figure img{display:block;width:100%;height:auto}
.ha-figure figcaption{display:flex;justify-content:space-around;gap:var(--space-4);font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.ha-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(28px,4vw,48px)}
@media (max-width:860px){.ha-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 8. shapes: index cards + shape pages ---------- */
.shape-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(12px,1.6vw,20px);margin:clamp(28px,4vw,44px) 0 0;padding:0;list-style:none}
.shape-card{position:relative;display:grid;grid-template-rows:auto 1fr;height:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:linear-gradient(170deg,var(--surface),var(--ink));color:inherit;text-decoration:none;overflow:hidden;transition:border-color var(--dur-2),transform var(--dur-3) var(--ease-lux),box-shadow var(--dur-3)}
.shape-card:hover{border-color:var(--gold-lo);transform:translateY(-3px);box-shadow:var(--glow)}
.shape-card:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.shape-card__art{display:grid;place-items:center;aspect-ratio:4/3;padding:18px;background:radial-gradient(70% 70% at 50% 45%,#1c0a19,transparent 75%)}
.shape-card__art img{width:auto;height:100%;max-width:100%;object-fit:contain;transition:transform var(--dur-4) var(--ease-lux)}
.shape-card:hover .shape-card__art img{transform:scale(1.05)}
.shape-card__body{display:grid;align-content:start;gap:6px;padding:16px 18px 20px;border-top:1px solid var(--line)}
.shape-card__name{font-family:var(--font-display);font-weight:500;font-size:var(--step-2);line-height:1.1;color:var(--ivory)}
.shape-card__style{font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--gold)}
.shape-card__text{font-size:var(--step--1);color:var(--stone)}
.shape-card__go{margin-top:6px;font-size:var(--step--1);color:var(--gold-hi)}
.shape-card__go .arrow{display:inline-block;transition:transform var(--dur-2) var(--ease-lux)}
.shape-card:hover .shape-card__go .arrow{transform:translateX(4px)}
.shape-card__real{position:absolute;top:10px;right:10px;padding:3px 8px;border:1px solid var(--gold-lo);border-radius:var(--radius-pill);background:rgba(0,0,0,.75);font-size:var(--step--2);letter-spacing:.06em;color:var(--gold-hi)}

.shape-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(20px,3vw,40px)}
.shape-hero__text{text-align:left}
.shape-hero__text .kicker{justify-content:flex-start}
.shape-hero__text .kicker::before{display:none}
.shape-hero__text .hero__title{margin:var(--space-2) 0 0;max-width:16ch}
.shape-hero__text .hero__lede{margin-left:0;text-align:left;max-width:46ch}
@media (max-width:860px){.shape-hero__text,.shape-hero__text .hero__lede{text-align:center}.shape-hero__text .kicker{justify-content:center}.shape-hero__text .hero__title,.shape-hero__text .hero__lede{margin-inline:auto}}
.shape-hero__art{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:var(--space-4);align-items:center}
.shape-hero__art figure{margin:0;display:grid;gap:var(--space-2);justify-items:center}
.shape-hero__art figcaption{font-size:var(--step--2);letter-spacing:.04em;color:var(--mute);text-align:center}
.shape-hero__art .illus{width:100%;aspect-ratio:1}
.shape-hero__art .illus img{width:82%;height:82%;object-fit:contain}
.shape-hero__art .media-frame{width:100%;box-shadow:0 0 0 1px var(--line-2)}
.shape-hero__art--2{--cols:2}
@media (max-width:860px){.shape-hero__grid{grid-template-columns:minmax(0,1fr)}}
.shape-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--line)}
.shape-facts>div{padding:18px 20px;background:var(--surface)}
.shape-facts dt{font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.shape-facts dd{margin:6px 0 0;color:var(--ivory)}
.shape-facts dd .big{display:block;font-family:var(--font-display);font-size:var(--step-2);line-height:1.1;color:var(--gold-hi)}
.shape-pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.shape-pc__col{padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.shape-pc__col--pro{border-color:var(--gold-lo);background:linear-gradient(170deg,rgba(226,199,186,.08),transparent 70%),var(--surface)}
.shape-pc__col h2,.shape-pc__col h3{margin:0 0 var(--space-4);font-size:var(--step-2)}
.shape-pc__col--pro h2,.shape-pc__col--pro h3{color:var(--gold-hi)}
.shape-pc ul{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.shape-pc li{position:relative;padding-left:22px;color:var(--stone)}
.shape-pc li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold)}
.shape-pc__col--pro li::before{background:var(--gold)}
@media (max-width:720px){.shape-pc{grid-template-columns:minmax(0,1fr)}}
.shape-section+.shape-section{border-top:1px solid var(--line)}
.shape-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:center}
.shape-note figure{margin:0}
.shape-note .illus{aspect-ratio:1;max-width:360px;width:100%;margin-inline:auto}
.shape-note .illus img{width:80%;height:80%;object-fit:contain}
@media (max-width:720px){.shape-note{grid-template-columns:minmax(0,1fr)}}
.shape-pager{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.shape-pager a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line-2);border-radius:var(--radius-pill);color:var(--stone);text-decoration:none;transition:border-color var(--dur-2),color var(--dur-2)}
.shape-pager a:hover{border-color:var(--gold);color:var(--gold-hi)}
.shape-pager a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.shape-mini{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-5) 0 0;padding:0;list-style:none}
.shape-mini a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--stone);font-size:var(--step--1);text-decoration:none}
.shape-mini a img{width:22px;height:22px}
.shape-mini a:hover,.shape-mini a[aria-current="page"]{border-color:var(--gold-lo);color:var(--gold-hi)}

/* ---------- 9. helpers ---------- */
.eyebrow-note{font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.hand__gem,.shape-card,.shape-card__art img{transition:none}.shape-card:hover{transform:none}}
.shape-hero__art:not(.shape-hero__art--2){max-width:400px;justify-self:center;width:100%}
.shape-hero__text .hero__lede{margin-top:var(--space-5)}
@media (min-width:861px){.shape-hero .crumbs ol{justify-content:flex-start}}
.shape-mini--hero{justify-content:center;margin-top:var(--space-6)}
.shape-panel__more{margin-top:var(--space-5)}
.ha-note{margin-top:clamp(24px,3vw,40px);max-width:80ch}
.ha-note+.ha-note{margin-top:clamp(24px,3vw,40px)}
@media (max-width:400px){.cert{padding:18px 12px}.cert::before{inset:5px}.cert__facets{font-size:11px;letter-spacing:-.01em}.cert__facets th,.cert__facets td{padding:6px 1px}.cert__facets tbody th{white-space:normal;padding-right:4px}}

/* Comparison videos: exceptional vs poor cut, side by side */
.vs{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:900px){.vs{grid-template-columns:1fr 1fr}}
.vs__fig{margin:0}
.vs__labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem;color:var(--mute)}
.vs__frame{aspect-ratio:2/1}
.vs__frame video{width:100%;height:100%;object-fit:cover;display:block}
.vs + .takeaway{margin-top:clamp(1.5rem,3vw,2.5rem)}

/* Hand + ear side by side (same --mm drives both). Ear crop of diamonds/orecchio/finale/orecchio-finale.jpg:
 * x 200–2700, y 800–3556 at 50.92 px/mm = 49.10 mm wide; lobe piercing point at (1000, 3000). */
.scale-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,32px);width:min(100%,820px);margin-inline:auto}
.scale-pair__item{display:grid;gap:var(--space-2);min-width:0}
.scale-pair__label{margin:0;text-align:center;font-size:var(--step--2);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--mute)}
.hand--ear{-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(transparent,#000 4%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hand--ear .hand__gem{left:32%;top:79.83%;width:calc(var(--mm) / 49.1 * 100%)}
@media (max-width:560px){.scale-pair{grid-template-columns:minmax(0,1fr)}}
/* carats 0.25–5 ct (owner, 11/10): 9 steps */
.carat .carat__row{--n:9}
.carat .carat__gem{width:calc((100% - var(--thumb)) / (var(--n) - 1) * var(--mm) / 12)}

/* ---------- 10. las-4c «Fotografía» views with real photos (owner, 11/10) ---------- */
/* carat: 4 and 5 ct were missing from the hand scale */
.carat[data-level-current="7"] .hand{--mm:10.3}
.carat[data-level-current="8"] .hand{--mm:11.1}
/* carat: shape picker + cut-out photos (assets/media-v4/shapes, transparent background). real-slider.js sets
 * --gw/--gh = width/height of the cut-out in mm (hand crop 138.89 × 153.06 mm, ear crop 49.10 × 54.11 mm). */
.shape-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:560px;margin-inline:auto}
.shape-pick__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:rgba(0,0,0,.5);cursor:pointer;transition:border-color var(--dur-2),background-color var(--dur-2)}
.shape-pick__btn img{width:26px;height:26px;opacity:.72;transition:opacity var(--dur-2)}
.shape-pick__btn:hover{border-color:var(--gold-lo)}
.shape-pick__btn:hover img,.shape-pick__btn[aria-pressed="true"] img{opacity:1}
.shape-pick__btn[aria-pressed="true"]{border-color:var(--ruby);background:rgba(226,199,186,.1);box-shadow:0 0 0 1px var(--ruby)}
.shape-pick__btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.shape-pick__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shape-pick__out{margin:0;text-align:center;font-size:var(--step--1);letter-spacing:.04em;color:var(--stone)}
.shape-pick__out [data-shape-mm]{color:var(--gold-hi)}
.scale-pair--shapes .hand__gem{width:calc(var(--gw,calc(var(--mm) * 1.0125)) / 138.89 * 100%);height:calc(var(--gh,calc(var(--mm) * 1.0125)) / 153.06 * 100%);aspect-ratio:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.65)) drop-shadow(0 0 6px rgba(246,233,226,.2));transition:width var(--dur-3) var(--ease-lux),height var(--dur-3) var(--ease-lux)}
.scale-pair--shapes .hand--ear .hand__gem{width:calc(var(--gw,calc(var(--mm) * 1.0125)) / 49.1 * 100%);height:calc(var(--gh,calc(var(--mm) * 1.0125)) / 54.11 * 100%)}
.scale-pair--shapes .hand__gem img{width:100%;height:100%;border-radius:0;object-fit:fill}
/* colour: side view on light grey (shows colour best) with the face-up photo in a circle */
.rs-pic{position:relative;width:min(78%,300px)}
.rs-photo .rs-pic .media-frame{width:100%}
.rs-photo .rs-pic .rs-pic__inset{position:absolute;right:-7%;bottom:-7%;width:36%;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line-2),0 10px 24px -8px rgba(0,0,0,.9)}
.rs-stage--color .rs-photo{padding-bottom:var(--space-3)}
.rs-stage--color .rs-photo__tag{margin-top:var(--space-3)}
.range-labels--dense button{min-width:0;padding:2px 1px;font-family:var(--font-body);font-size:var(--step--1);letter-spacing:0;white-space:nowrap}
@media (max-width:560px){.range-labels--dense button{font-size:11px}}
/* clarity: every grade of the category side by side; SI and I add a loupe on the inclusions */
.rs-set{--c:2;display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:clamp(10px,2vw,20px);width:min(100%,440px);margin-inline:auto;align-items:start}
.rs-set--1{--c:1;width:min(78%,300px)}
.rs-set--3{--c:3}
.rs-shot{display:grid;justify-items:center;gap:var(--space-2);min-width:0}
.rs-shot__pic{position:relative;width:100%}
.rs-shot__pic>.media-frame:first-child{width:100%;box-shadow:0 0 0 1px var(--line-2),0 20px 50px -20px rgba(0,0,0,.9)}
.rs-shot__loupe{position:absolute!important;right:-6%;bottom:-6%;width:46%;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--gold-lo),0 8px 20px -6px rgba(0,0,0,.9)}
.rs-shot .rs-photo__tag{text-align:center;line-height:1.35;margin-top:var(--space-2)}
.rs-shot .rs-photo__tag b{font-weight:500;color:var(--ivory)}
/* cut: square frame, the photos are at the same scale */
.rs-photo .rs-cutpic{border-radius:var(--radius-sm)}
.rs-none--illus .cutgrade__gem{width:min(46%,150px)}
/* light: real videos for brilliance, fire and scintillation */
.light-video{--ratio:1;border-radius:0}
.light-video--left video{object-position:0 50%}
.light-look{margin-top:var(--space-3);padding-left:var(--space-3);border-left:2px solid var(--gold-lo);font-size:var(--step--1);color:var(--stone)}
.light-intro{margin-top:var(--space-3);color:var(--stone)}
#luz .video-toggle{margin-top:var(--space-4)}
@media (prefers-reduced-motion:reduce){.scale-pair--shapes .hand__gem,.shape-pick__btn,.shape-pick__btn img{transition:none}}
.shape-pick__btn img{width:30px;height:30px}
/* the round diameter under the slider does not apply to the other shapes: their size is in the readout above */
.carat[data-view="real"]:not([data-shape="redondo"]) .carat__out .carat__mm,.carat[data-view="real"]:not([data-shape="redondo"]) .carat__out .fine{display:none}
#luz .video-toggle{display:inline-flex;width:auto;justify-self:start}
@media (max-width:560px){.range-labels--dense button:nth-last-child(2){transform:translateX(-66%)}.range-labels--dense button.is-active:nth-last-child(2){transform:translateX(-66%) translateY(-2px)}.range-labels--dense button:last-child{transform:translateX(-36%)}.range-labels--dense button.is-active:last-child{transform:translateX(-36%) translateY(-2px)}}
/* fix-B · colour badge: two-letter grades (O–P, U–V) become a pill instead of breaking out of the circle */
.color-stage .level-badge{width:auto;min-width:52px;padding-inline:10px;font-size:var(--step-2);border-radius:999px;white-space:nowrap}
/* fix-B · shape pages: room between the CTA button and the «Las diez formas» pills */
.principle+.shape-more{margin-top:48px}
/* fix-B · bow-tie caption on the non-oval pages */
.shape-note figcaption{margin-top:var(--space-2);font-size:var(--step--2);letter-spacing:.04em;color:var(--mute);text-align:center}
/* fix-B · la-talla «Las partes»: with nothing chosen, show the Tabla note (pre-selected) instead of an empty box */
.anatomy-layout:not(:has(.diagram[data-active])) .anatomy-note [data-note="table"][hidden]{display:block!important}
.anatomy-layout:not(:has(.diagram[data-active])) .anatomy-note__empty{display:none}
.anatomy-layout:not(:has(.diagram[data-active])) .diagram-legend button[data-target="table"]{border-color:var(--gold);background:var(--gold-veil-2);color:var(--gold-hi)}
.anatomy-layout:not(:has(.diagram[data-active])) .diagram svg #table .area{fill-opacity:.2}
.anatomy-layout:not(:has(.diagram[data-active])) .diagram svg #table .edge{stroke:var(--gold-hi);stroke-opacity:1;stroke-width:2.6}