/* ============================================================
   Course window
   Additive: touches no existing rule. All values resolve to
   :root tokens. Layering sits just under the cart:
     refract 3 · topbar 50 · drawer 90 · CURSO 96/97 · cart 100/101
   ============================================================ */

/* the detail blocks are data, not layout — the window clones them */
.cursos-det{ display:none; }

/* ── the way in, printed on the centred card ────────────────
   Belongs to the arc, lives here because its only job is to open the
   course window. It rides ON the centred card so it reads as that
   card's own footer, not as a control floating near it.

   The vertical maths, so it tracks the art at every size:
     · the mesh is 64% of the stage height (74% below 700px), centred,
       so it spans 18%–82% of the stage;
     · the artwork is the top 640px of the texture's 772px = 82.9%,
       putting the card's bottom edge 28.94% of the stage height above
       the stage's base (25.65% on mobile);
     · and the arc LIFTS the centred plate — `B * 0.5` in script.js's
       frame() resolves to 2.5% of the stage WIDTH. That is why a
       height-only percentage drifts on wide viewports and drops the
       button onto the baked title. Hence the vw term. */
.gal__ver{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(28.94% + 2.5vw + 14px);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  /* translucent paper so the card's own tint reads through it — printed on
     the plate rather than dropped on top of it */
  background:rgba(250,247,242,.84); border:1px solid var(--line); border-radius:4px;
  color:var(--rose-deep); cursor:pointer;
  font-family:var(--sans); font-size:var(--t-label); font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  padding:10px 18px;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), opacity .4s var(--ease);
}
.gal__ver:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:#FFF9F5; }
.gal__ver .ico{ width:1.05em; height:1.05em; transition:transform .5s var(--ease); }
.gal__ver:hover .ico{ transform:translateX(5px); }
/* out of the way while the arc is being dragged — same signal the hint uses */
.gal__stage.is-held .gal__ver{ opacity:0; pointer-events:none; }

.gal__hint--sm{ display:none; }

@media (max-width:700px){
  /* the mesh grows to 74% here, spanning 13%–87%, so the card's bottom edge
     lands at 13% + 74%×0.829 ≈ 74.35% — 25.65% above the stage's base */
  .gal__ver{ bottom:calc(25.65% + 2.5vw + 10px); padding:9px 15px; }
  /* the long hint wraps to two lines on a phone, and the keyboard half of it
     is meaningless on touch */
  .gal__hint--lg{ display:none; }
  .gal__hint--sm{ display:inline; }
}

@media (prefers-reduced-motion:reduce){
  .gal__ver,
  .gal__ver .ico{ transition:none; }
  .gal__ver:hover .ico{ transform:none; }
}

.cv-veil{
  position:fixed; inset:0; z-index:96;
  background:rgba(38,37,33,.24);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease);
}
.cv-veil.is-on{ opacity:1; pointer-events:auto; }

.cv{
  position:fixed; inset:0; z-index:97;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,40px);
  visibility:hidden; pointer-events:none;
}
.cv.is-open{ visibility:visible; pointer-events:auto; }

.cv__panel{
  position:relative;
  width:min(880px,100%); max-height:calc(100svh - clamp(28px,6vw,80px));
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  overflow-y:auto; overscroll-behavior:contain;
}

.cv__x{
  position:absolute; top:clamp(12px,1.6vw,18px); right:clamp(12px,1.6vw,18px); z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  color:var(--ink-2); cursor:pointer;
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.cv__x:hover{ border-color:var(--rose-lt); color:var(--rose-deep); transform:rotate(90deg); }
.cv__x .ico{ width:17px; height:17px; }

/* ── head ───────────────────────────────────────────────── */
.cv__head{
  display:grid; grid-template-columns:clamp(112px,16vw,168px) 1fr; gap:clamp(20px,3vw,36px);
  align-items:center;
  padding:clamp(26px,3.4vw,42px) clamp(24px,3.2vw,44px) clamp(22px,2.6vw,32px);
  border-bottom:1px solid var(--line);
}
.cv__plate{
  border-radius:4px; overflow:hidden; background:var(--paper-2); aspect-ratio:4/5;
}
.cv__plate img{ width:100%; height:100%; object-fit:cover; }

.cv__mov{
  font-size:var(--t-label); font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rose-deep); margin-bottom:12px;
}
.cv__t{
  font-family:var(--serif); font-size:var(--fs-h2); line-height:1.06;
  letter-spacing:-.03em; text-wrap:balance; max-width:20ch;
}
.cv__sub{
  margin-top:10px; font-size:var(--t-sm); color:var(--ink-3);
  letter-spacing:.01em;
}

/* ── body — cloned out of the page ──────────────────────── */
.cv__body{ padding:clamp(24px,3vw,38px) clamp(24px,3.2vw,44px); }
.cv__body .cd__lead{
  font-family:var(--serif); font-style:italic; font-size:var(--fs-quote-sm);
  line-height:1.46; letter-spacing:-.015em; color:var(--ink); max-width:52ch;
}
.cv__body .cd__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,52px);
  margin-top:clamp(24px,3vw,36px);
}
.cv__body h4{
  font-family:var(--sans); font-size:var(--t-label); font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  padding-bottom:11px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.cv__body ul{ display:flex; flex-direction:column; gap:11px; }
.cv__body li{
  position:relative; padding-left:20px; font-size:var(--t-md);
  color:var(--ink-2); line-height:1.62; max-width:44ch;
}
.cv__body li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:7px;
  background:var(--rose); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ── foot ───────────────────────────────────────────────── */
.cv__foot{
  position:sticky; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,32px);
  padding:clamp(18px,2.4vw,26px) clamp(24px,3.2vw,44px);
  background:var(--sage-soft); border-top:1px solid var(--line);
}
.cv__priceL{
  display:block; font-size:var(--t-label); font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.cv__priceV{
  font-family:var(--serif); font-size:var(--fs-h3); letter-spacing:-.022em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.cv__add{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--rose-deep); color:#FFF9F5; border:0; border-radius:4px;
  padding:16px 30px; cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-size:var(--t-md); font-weight:300; letter-spacing:.01em;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.cv__add:hover{ background:var(--ink); transform:translateY(-2px); }
.cv__add .ico{ width:1.2em; height:1.2em; transition:transform .5s var(--ease); }
.cv__add:hover .ico{ transform:translateX(6px); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:720px){
  .cv__head{ grid-template-columns:1fr; gap:20px; }
  .cv__plate{ width:132px; aspect-ratio:4/5; }
  .cv__body .cd__cols{ grid-template-columns:1fr; }
  .cv__foot{ flex-direction:column; align-items:stretch; gap:14px; }
  .cv__add{ justify-content:center; }
}

/* ── reduced motion: parity with the rest of the page ───── */
@media (prefers-reduced-motion:reduce){
  .cv__panel,
  .cv__panel > *{ opacity:1 !important; transform:none !important; }
  .cv-veil{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(38,37,33,.46); }
  .cv__x:hover,
  .cv__add:hover,
  .cv__add:hover .ico{ transition:none; transform:none; }
}