/* Noga Diamonds · Cómo medimos v4 (assets/css/medimos-v4.css)
 * Loaded by pages/educacion/como-medimos.html through the page metadata "styles", after edu-v3.css.
 *  1. Actual 3D report: page picker + stage (#informe-3d, toggles via site.js [data-toggle-group])
 *  2. ETAS / DETAS images from the report (#etas-detas)
 *  3. Darkfield: two similar actual diamonds, photo / video (#darkfield)
 * Without JS every report page and both darkfield media are shown, stacked.
 */

/* ---------- 1. actual 3D report ---------- */
.rep3d{display:grid;gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2.5rem,6vw,4.5rem);align-items:start}
@media (min-width:960px){.rep3d{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.rep3d__text{display:grid;gap:var(--space-3);align-content:start}
.rep3d__text p{margin:0}
.rep3d__pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:var(--space-3)}
.rep3d__pages button{display:grid;gap:8px;padding:6px 6px 10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:transparent;color:var(--stone);font:inherit;font-size:var(--step--1);line-height:1.3;text-align:center;cursor:pointer;transition:border-color var(--dur-2),color var(--dur-2),background-color var(--dur-2)}
.rep3d__pages button img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:4px;background:#fff}
.rep3d__pages button:hover{color:var(--ivory);border-color:var(--gold)}
.rep3d__pages button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-veil-2);color:var(--gold-hi)}
.rep3d__pages button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
html:not(.js) .rep3d__pages{display:none}
.rep3d__fig{margin:0;display:grid;gap:var(--space-3)}
.rep3d__stage{display:grid;gap:var(--space-4)}
.rep3d__page{display:block;width:100%;height:auto;background:#fff;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--line-2),0 24px 60px -28px rgba(0,0,0,.9)}
.js .rep3d__stage[data-state="p1"] .rep3d__page:not(.rep3d__page--p1),
.js .rep3d__stage[data-state="p2"] .rep3d__page:not(.rep3d__page--p2),
.js .rep3d__stage[data-state="p3"] .rep3d__page:not(.rep3d__page--p3){display:none}
.js .rep3d__page{animation:rep3d-in var(--dur-3,.4s) var(--ease-out,ease-out)}
@keyframes rep3d-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rep3d__fig figcaption{color:var(--stone)}

/* ---------- 2. ETAS / DETAS ---------- */
.etas-pair{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(2rem,5vw,3rem)}
.etas-pair figure{margin:0;display:grid;gap:var(--space-2);align-content:start}
.etas-pair .media-frame{box-shadow:0 0 0 1px var(--line-2)}
.etas-pair img{display:block;width:100%;height:100%;object-fit:cover}
.etas-pair figcaption{color:var(--stone)}
.etas-pair__cap{grid-column:1/-1;margin:0;color:var(--stone)}
@media (max-width:520px){.etas-pair{grid-template-columns:1fr}.etas-pair .media-frame{width:min(100%,340px);justify-self:center}}

/* ---------- 3. darkfield: two actual diamonds ---------- */
.df-real{margin:clamp(3.5rem,8vw,6rem) auto 0;max-width:980px;display:grid;gap:var(--space-3);text-align:center}
.df-real__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.df-real__title{margin:0;font-size:var(--step-1,1.15rem);color:var(--ivory);text-align:left}
.df-real__switch{display:none;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--radius-pill)}
.js .df-real__switch{display:inline-flex}
.df-real__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)}
.df-real__switch button:hover{color:var(--ivory)}
.df-real__switch button[aria-pressed="true"]{background:var(--ruby);color:var(--ivory)}
.df-real__switch button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.df-real .vs__labels{margin-bottom:0}
.df-real__stage{display:grid;gap:var(--space-3)}
.df-real__frame{--ratio:2/1;box-shadow:0 0 0 1px var(--line-2)}
.df-real__frame img,.df-real__frame video{display:block;width:100%;height:100%;object-fit:cover}
.js .df-real__stage[data-state="foto"] .df-real__video,.js .df-real__stage[data-state="video"] .df-real__photo{display:none}
.df-real figcaption{max-width:72ch;margin-inline:auto;color:var(--stone)}
.df-real figcaption .nosell{margin-top:var(--space-2)}

@media (prefers-reduced-motion:reduce){.js .rep3d__page{animation:none}.rep3d__pages button,.df-real__switch button{transition:none}}