/* Hero de la home: «Un test te pone una nota» con el método Revopol en cinco pantallas, en papel (diseño «Corrección»).
   Viene de la maqueta /maqueta-metodo-pantallas/ (diseño 2). Lo usa astro/src/home/home-body.html (#inicio) con metodo-hero.js.
   Prefijos: dz- (hero), mx- (componente), cx- (pantallas en papel). */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/caveat-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   Hero: foto, texto a la izquierda y el método en cinco pantallas a la derecha
   =================================================================== */
.dz {
  --fg: #fff;
  --mut: rgba(255, 255, 255, 0.72);
  --acc: #ffd84d;
  --line: rgba(255, 255, 255, 0.22);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #071433;
  min-height: clamp(720px, calc(100svh - 104px), 960px);
}

.dz-media { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; }
.dz-media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 60%; transform-origin: 75% 55%; animation: dz-kb 14s cubic-bezier(0.22, 0.6, 0.3, 1) both; transition: filter 0.6s; }
@keyframes dz-kb { from { transform: scale(1.1); } to { transform: scale(1); } }
/* cada diseño trata la foto a su manera */
.dz-media img {  filter: blur(2px) brightness(0.72) saturate(0.9); }
.dz-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 14, 38, 0.95) 0%, rgba(4, 14, 38, 0.88) 36%, rgba(4, 14, 38, 0.6) 52%, rgba(4, 14, 38, 0.45) 70%, rgba(4, 14, 38, 0.4) 100%), linear-gradient(0deg, rgba(4, 14, 38, 0.55) 0%, rgba(4, 14, 38, 0) 36%); }
.dz-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 48px; align-items: center; padding: 28px 0 84px; }
.dz-copy { max-width: 600px; }
.dz-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.dz-flag { display: inline-block; width: 20px; height: 13px; border-radius: 2px; background: linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%); flex: 0 0 auto; }
.dz h1 { margin-top: 20px; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 880; text-wrap: balance; text-shadow: 0 2px 30px rgba(4, 14, 38, 0.35); }
.dz h1 em { font-style: normal; color: #ffca2a; }
.dz h1 > span { display: block; margin-top: 14px; font-size: 0.48em; line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; color: rgba(255, 255, 255, 0.92); }
.dz-lead { margin-top: 20px; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 32em; text-wrap: pretty; }
.dz-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dz-btn-glass { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dz-btn-glass .play-dot { background: #fff; color: var(--ink); }
.dz-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.dz-proof li { display: inline-flex; align-items: center; gap: 7px; }
.dz-proof b { color: #fff; }
.dz-credit { position: absolute; z-index: 4; right: 12px; bottom: 4px; max-width: 60%; color: rgba(255, 255, 255, 0.4); font-size: 10.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* el componente: pestañas, una frase por paso, escenario y controles */
.mx-card { width: 100%; max-width: 580px; margin-left: auto; color: var(--fg); }
.mx-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mx-tabs button { display: grid; grid-template-columns: auto 1fr; gap: 7px 6px; padding: 0; border: 0; background: none; color: var(--mut); font: inherit; text-align: left; cursor: pointer; }
.mx-tabs button > i { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mx-tabs button > i > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--acc); }
.mx-tabs button b { font-size: 12px; font-weight: 850; color: var(--acc); font-variant-numeric: tabular-nums; }
.mx-tabs button span { display: none; }
.mx-tabs button[aria-current="true"] { color: #fff; }
.mx-tabs button:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.mx-caps { min-height: 2.9em; margin: 10px 0 12px; }
.mx-cap { display: none; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 10px rgba(4, 14, 38, 0.6); }
.mx-cap b { color: #fff; }
.mx-cap.is-on { display: block; animation: mx-in 0.45s ease both; }
@keyframes mx-in { from { opacity: 0; transform: translateY(6px); } }
.mx-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.mx-ctrl button { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 13px; cursor: pointer; }
.mx-ctrl button:hover { background: rgba(255, 255, 255, 0.14); }
.mx-ctrl p { margin-left: 8px; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, 0.5); }

.mx-stage { position: relative; height: 510px; container: stage / inline-size; }
/* pantallas: una visible a la vez */
.cx-s { position: absolute; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.45s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.55s; }
.cx-s.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s 0.15s, transform 0.55s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* trazos de tinta (Corrección) */
.ink { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s ease-out; }
.ink.red { stroke: #d12b3f; stroke-width: 3; }
.ink.blue { stroke: #1f4fd6; stroke-width: 3; }
.ink.pencil { stroke: #4a4a52; stroke-width: 2; }
.ink.dash { stroke-dasharray: 1; }
.is-draw .ink, .ink.is-draw { stroke-dashoffset: 0; }
.hand { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; letter-spacing: 0; }
.hand.red { color: #d12b3f; }
.hand.blue { color: #1f4fd6; }

/* ===================================================================
   2 · CORRECCIÓN
   =================================================================== */
.cx { color: #23262e; }
.cx-s { inset: 0; }
.cx-lined { background: linear-gradient(90deg, transparent 34px, rgba(209, 43, 63, 0.35) 34px 35.5px, transparent 35.5px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(74, 120, 200, 0.18) 25px 26px), #fbfaf5; }
.cx-grid-paper { background: linear-gradient(rgba(74, 120, 200, 0.14) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(74, 120, 200, 0.14) 1px, transparent 1px) 0 0 / 18px 18px, #fbfaf5; }
.cx-lined, .cx-grid-paper { position: absolute; border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06), 0 26px 50px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25); }
.cx-title { font-size: 26px; line-height: 1; }

/* 1 · exámenes y recuento */
.cx-stack { position: absolute; left: 0; top: 40px; width: 230px; height: 330px; }
.cx-sheet { position: absolute; inset: 0; padding: 18px 16px; border-radius: 3px; background: repeating-linear-gradient(180deg, transparent 0 46px, rgba(0, 0, 0, 0.06) 46px 47px, transparent 47px 54px, rgba(0, 0, 0, 0.05) 54px 55px), #f6f4ec; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45); transform: translate(var(--x), -60px) rotate(var(--r)); opacity: 0; transition: transform 0.55s cubic-bezier(0.2, 1.1, 0.3, 1), opacity 0.3s; }
.cx-sheet.is-in { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
.cx-sheet p { font-family: ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7080; }
.cx-sheet b { display: block; margin-top: 4px; font-size: 17px; font-weight: 850; color: #1b1e26; }
.cx-sheet i { position: absolute; right: -8px; top: 22px; padding: 3px 8px; border-radius: 3px; background: var(--tab); color: #23262e; font-family: "Caveat", cursive; font-size: 17px; font-weight: 700; font-style: normal; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.cx-sheet::after { content: ""; position: absolute; left: 16px; right: 40px; top: 120px; height: 12px; background: rgba(255, 226, 0, 0.55); transform: scaleX(0); transform-origin: left; transition: transform 0.4s 0.3s; }
.cx-sheet.is-in::after { transform: scaleX(1); }
.cx-tally { right: 0; top: 10px; width: 330px; height: 400px; padding: 20px 22px; transform: rotate(1.5deg); }
.cx-bars { display: grid; gap: 9px; margin-top: 18px; }
.cx-bar { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.cx-bar span, .cx-bar b { font-family: "Caveat", cursive; font-size: 22px; font-weight: 700; line-height: 1; color: #23262e; }
.cx-bar b { text-align: right; color: #1f4fd6; }
.cx-bar i { height: 16px; background: repeating-linear-gradient(115deg, rgba(31, 79, 214, 0.75) 0 2px, transparent 2px 6px); border: 2px solid rgba(31, 79, 214, 0.85); border-radius: 2px 6px 3px 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.6s ease-out calc(var(--i) * 120ms); width: calc(var(--w) * 1%); }
.cx-s.is-a .cx-bar i { transform: scaleX(1); }
.cx-bar.is-t8 i { background: repeating-linear-gradient(115deg, rgba(209, 43, 63, 0.8) 0 2px, transparent 2px 6px); border-color: #d12b3f; }
.cx-bar.is-t8 b { color: #d12b3f; }
.cx-t8 { position: absolute; right: 26px; bottom: 26px; font-size: 32px; transform: rotate(-6deg); opacity: 0; transition: opacity 0.4s; }
.cx-s.is-b .cx-t8 { opacity: 1; }
.cx-circle { position: absolute; left: 6px; top: 64px; width: 100px; height: 50px; }

/* 2 · entrevista y test */
.cx-note { left: 0; top: 30px; width: 300px; height: 330px; padding: 22px 20px 20px 50px; transform: rotate(-2.5deg); }
.cx-note-h { font-size: 13px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7080; }
.cx-line { display: grid; gap: 0; margin-top: 18px; }
.cx-line span { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8f9c; }
.cx-line b { font-size: 27px; line-height: 1.05; clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(16); }
.cx-line.is-on b { clip-path: inset(0 -10px 0 0); }
.cx-mini { right: 0; top: 90px; width: 290px; padding: 18px 18px 16px 48px; transform: rotate(2.5deg); }
.cx-mini-h { font-family: ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7080; }
.cx-mini ol { margin: 10px 0 0; padding: 0; list-style: none; }
.cx-mini li { display: flex; justify-content: space-between; align-items: center; height: 26px; font-size: 13px; color: #2b2f39; }
.cx-mini li i { font-family: "Caveat", cursive; font-size: 24px; font-style: normal; font-weight: 700; color: #d12b3f; opacity: 0; transform: scale(1.6); transition: opacity 0.2s, transform 0.3s; }
.cx-mini li.is-on i { opacity: 1; transform: none; }
.cx-mini li.is-ko.is-on { background: linear-gradient(90deg, rgba(255, 226, 0, 0.5), rgba(255, 226, 0, 0.5)) no-repeat 0 50% / 100% 60%; }
.cx-mini-grade { margin-top: 8px; font-size: 38px; text-align: right; transform: rotate(-4deg); opacity: 0; transition: opacity 0.4s; }
.cx-s.is-c .cx-mini-grade { opacity: 1; }

/* 3 · matriz */
.cx-matrix { left: 6px; right: 6px; top: 6px; bottom: 30px; padding: 0; transform: rotate(-0.8deg); }
.cx-axes { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-axes .ink.pencil { stroke-width: 2.4; }
.cx-axes .ink.dash { stroke: rgba(74, 74, 82, 0.5); stroke-width: 1.6; }
.cx-ax { position: absolute; font-size: 24px; color: #4a4a52; }
.cx-ax.is-x { right: 18px; bottom: 6px; }
.cx-ax.is-y { left: 0; top: 50%; transform: rotate(-90deg) translate(-10%, -120%); transform-origin: left top; white-space: nowrap; }
.cx-posts { position: absolute; inset: 0; }
.cx-pi { position: absolute; left: var(--x); top: var(--y); width: 132px; padding: 8px 9px 7px; background: var(--pc, #fff27a); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); font-family: "Caveat", cursive; font-size: 19px; font-weight: 700; line-height: 1; color: #23262e; transform: translate(40px, -60px) rotate(12deg) scale(0.8); opacity: 0; transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.3s; }
.cx-pi b { display: block; margin-top: 4px; font-size: 22px; color: #0d7a55; }
.cx-pi.is-dull { --pc: #eceae2; color: #7a7d86; }
.cx-pi.is-dull b { color: #9a9da6; font-size: 17px; }
.cx-pi.is-in { opacity: 1; transform: rotate(var(--r)); }
.cx-zone { position: absolute; left: 49%; top: 1%; width: 52%; height: 50%; }
.cx-zone .ink.blue { stroke-width: 3.4; }
.cx-zone-l { position: absolute; right: 18px; top: 50%; font-size: 30px; transform: rotate(-3deg); opacity: 0; transition: opacity 0.4s 0.6s; }
.cx-s.is-c .cx-zone-l { opacity: 1; }

/* 4 · agenda */
.cx-planner { position: absolute; left: 0; right: 30px; top: 18px; bottom: 30px; padding: 30px 20px 18px; border-radius: 6px; background: #fbfaf5; box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25); transform: rotate(-1deg); }
.cx-rings { position: absolute; left: 30px; right: 30px; top: -10px; height: 22px; background: radial-gradient(circle at 9px 11px, #1a140f 5px, #c9c3b6 5.5px 8px, transparent 8.5px) 0 0 / 34px 22px repeat-x; }
.cx-planner-h { font-size: 30px; line-height: 1; color: #1f4fd6; }
.cx-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; height: calc(100% - 44px); margin-top: 12px; border-top: 1.5px solid #2b2f39; }
.cx-day { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 0; border-left: 1px solid rgba(43, 47, 57, 0.18); }
.cx-day:first-child { border-left: 0; }
.cx-day > p { font-family: "Caveat", cursive; font-size: 21px; font-weight: 700; text-align: center; color: #2b2f39; }
.cx-blk { position: relative; height: calc(var(--m) * 2.1px); min-height: 20px; padding: 3px 5px; font-family: "Caveat", cursive; font-size: 15.5px; font-weight: 700; line-height: 0.95; color: #23262e; clip-path: inset(0 100% 0 0); transition: clip-path 0.45s ease-out; }
.cx-blk::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px 8px 4px 6px; background: var(--hl); opacity: 0.85; }
.cx-blk.is-in { clip-path: inset(0 0 0 0); }
.cx-blk[data-k="est"] { --hl: rgba(110, 190, 255, 0.55); }
.cx-blk[data-k="test"] { --hl: rgba(255, 226, 0, 0.6); }
.cx-blk[data-k="rep"] { --hl: rgba(200, 160, 255, 0.55); }
.cx-blk[data-k="pausa"] { --hl: transparent; color: #8a8f9c; border: 1.5px dashed rgba(43, 47, 57, 0.3); border-radius: 4px; }
.cx-blk[data-k="tut"] { --hl: rgba(110, 220, 170, 0.6); }
.cx-post { position: absolute; padding: 12px 14px; background: #fff27a; color: #23262e; box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4); font-size: 22px; line-height: 1.05; opacity: 0; transform: translate(30px, 20px) rotate(10deg); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 1.3, 0.4, 1); }
.cx-post.is-reviews { right: -6px; bottom: 0; width: 170px; }
.cx-post b { color: #1f4fd6; }
.cx-s.is-c .cx-post { opacity: 1; transform: rotate(4deg); }

/* 5 · progreso */
.cx-progress { left: 0; right: 40px; top: 10px; height: 400px; padding: 18px 20px; transform: rotate(-1deg); }
.cx-progress svg { position: absolute; left: 20px; right: 20px; top: 60px; width: calc(100% - 40px); height: calc(100% - 90px); overflow: visible; }
.cx-progress .ink.pencil { stroke: #2b2f39; stroke-width: 2.6; transition-duration: 2.6s; }
.cx-progress .cut { stroke: #d12b3f; stroke-width: 2; stroke-dasharray: 8 6; fill: none; }
.cx-progress .pt { fill: #2b2f39; opacity: 0; transition: opacity 0.3s; }
.cx-progress .pt.is-on { opacity: 1; }
.cx-progress .lbl { font-family: "Caveat", cursive; font-size: 20px; font-weight: 700; fill: #4a5060; text-anchor: middle; }
.cx-progress .ann { font-family: "Caveat", cursive; font-size: 22px; font-weight: 700; fill: #d12b3f; opacity: 0; transition: opacity 0.4s; }
.cx-progress .ann.is-on { opacity: 1; }
.cx-progress .ann.is-ok { fill: #0d7a55; }
.cx-cutl { position: absolute; right: 24px; top: 92px; font-size: 22px; }
.cx-stamp { position: absolute; right: 54px; bottom: 60px; padding: 6px 18px; border: 4px solid rgba(13, 122, 85, 0.85); border-radius: 8px; color: rgba(13, 122, 85, 0.85); font-size: 34px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-14deg) scale(2.2); opacity: 0; transition: transform 0.35s cubic-bezier(0.5, 0, 0.6, 1.6), opacity 0.2s; mix-blend-mode: multiply; }
.cx-s.is-c .cx-stamp { opacity: 1; transform: rotate(-14deg) scale(1); }
.cx-post.is-tutor { right: -10px; bottom: 6px; width: 210px; background: #ffc2d4; font-size: 21px; }
.cx-post.is-tutor small { display: block; margin-bottom: 4px; font-family: Inter, system-ui, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a3a52; }
.cx-post.is-tutor span { display: block; margin-top: 6px; text-align: right; color: #1f4fd6; }
.cx-s.is-d .cx-post.is-tutor { opacity: 1; transform: rotate(-3deg); }

@media (max-width: 1100px) {
  .dz-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 32px; }
}
@media (max-width: 860px) {
  .dz { min-height: 0; }
  .dz-media, .dz-shade { bottom: auto; height: 380px; }
  .dz-media img { object-position: 72% 55%; }
  .dz-shade { background: linear-gradient(0deg, #071433 0%, rgba(7, 20, 51, 0.55) 35%, rgba(7, 20, 51, 0) 65%), linear-gradient(180deg, rgba(4, 14, 38, 0.35), rgba(4, 14, 38, 0) 30%); }
  .dz-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 250px 0 90px; }
  .dz-copy { max-width: none; }
  .dz h1 { font-size: clamp(32px, 9vw, 50px); }
  .dz-kicker { flex-wrap: wrap; row-gap: 4px; }
  .dz-ctas .btn { width: 100%; justify-content: center; }
  .mx-card { max-width: 580px; margin: 0 auto; }
  .dz-credit { position: static; padding: 6px 16px 80px; max-width: none; text-align: left; white-space: normal; }
}
@media (max-width: 560px) {
  .mx-tabs button span { display: none; }
  .mx-stage { height: 560px; }
}

@container stage (max-width: 620px) {

  /* Corrección */
  .cx-stack { left: 6px; top: 0; width: 160px; height: 230px; }
  .cx-sheet b { font-size: 14px; }
  .cx-tally { right: 0; top: 200px; width: 270px; height: 340px; padding: 14px 16px; }
  .cx-bars { gap: 6px; }
  .cx-bar span, .cx-bar b { font-size: 19px; }
  .cx-note { left: 4px; top: 0; width: 250px; height: 270px; padding: 16px 14px 14px 44px; }
  .cx-line b { font-size: 23px; }
  .cx-mini { right: 0; top: 240px; width: 270px; }
  .cx-ax { font-size: 20px; }
  .cx-pi { width: 104px; font-size: 16px; padding: 6px 7px; }
  .cx-pi b { font-size: 18px; }
  .cx-zone-l { font-size: 24px; }
  .cx-planner { right: 0; padding: 26px 8px 12px; }
  .cx-day > p { font-size: 17px; }
  .cx-post.is-reviews { bottom: -10px; }
  .cx-progress { right: 0; height: 360px; }
  .cx-post.is-tutor { bottom: -6px; width: 190px; font-size: 19px; }
  .cx-stamp { right: 30px; bottom: 120px; font-size: 26px; }

}
/* escenario medio (el hero en escritorio): papeles uno al lado del otro */
@container stage (min-width: 441px) and (max-width: 620px) {
  .cx-stack { left: 0; top: 30px; width: 210px; height: 290px; }
  .cx-tally { right: 0; top: 10px; width: 300px; height: 390px; }
  .cx-note { left: 0; top: 20px; width: 280px; height: 300px; }
  .cx-mini { right: 0; top: 150px; width: 270px; }
  .cx-progress { height: 400px; }
  .cx-post.is-tutor { bottom: 20px; }
  .cx-stamp { bottom: 70px; }
}
/* escenario estrecho (móvil): sin rótulos dentro de los bloques del plan */
@container stage (max-width: 440px) {
  .cx-blk { font-size: 0; height: calc(var(--m) * 2px); }
}
@media (prefers-reduced-motion: reduce) {
  .dz *, .dz *::before, .dz *::after { transition: none !important; animation: none !important; }
}