/* CalmaLink kit — shared styles for the new pages and tools (ck- prefix):
   route and service pages, English test, career test, budget calculator, university matcher, document checklist,
   interview practice cards, «Mi solicitud» demo, timeline, FAQ, tools strip and mobile bar. Same look as the rest of the site. */
.ck {
  --ck-navy: #16354B; --ck-deep: #0a1e33; --ck-teal: #167E79; --ck-mint: #9fe3c9; --ck-amber: #f2c35a; --ck-coral: #e8684a;
  --ck-muted: #4b5d72; --ck-line: #dbe5ee; --ck-paper: #f6f9fb; --ck-mintbg: #e8f5ef; --ck-sand: #fff8e6; --ck-white: #fff;
  --ck-hand: Manrope, sans-serif;
  color: var(--ck-navy);
}
.ck, .ck *, .ck *::before, .ck *::after { box-sizing: border-box; }
.ck [hidden] { display: none !important; }
.ck p { margin: 0; }
.ck h1, .ck h2, .ck h3 { margin: 0; text-wrap: balance; }
.ck-c { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.ck-sec { padding-block: clamp(56px, 8vw, 96px); }
.ck-tint { background: var(--ck-paper); }
.ck-dark { background: radial-gradient(70% 90% at 70% 40%, #1e4b74 0%, #11314f 55%, var(--ck-deep) 100%); color: #fff; }
.ck-eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ck-teal); }
.ck-dark .ck-eyebrow { color: var(--ck-mint); }
.ck-head { display: grid; gap: 10px; max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.ck-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.07; font-weight: 800; letter-spacing: -.02em; }
.ck-head p:not(.ck-eyebrow) { color: var(--ck-muted); font-size: 1.06rem; max-width: 62ch; }
.ck-dark .ck-head p:not(.ck-eyebrow) { color: #c6d6e5; }
.ck-fine { font-size: .82rem; color: var(--ck-muted); }
.ck-dark .ck-fine { color: #9fb4c7; }
.ck a { color: var(--ck-teal); }
.ck-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.ck-rv.in { opacity: 1; transform: none; }
.ck-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 13px 18px; font: inherit; font-weight: 800; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.ck a.ck-btn { color: inherit; }
.ck-btn.ck-amber, .ck a.ck-btn.ck-amber { background: var(--ck-amber); color: var(--ck-navy); }
.ck-btn.ck-amber:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(242, 195, 90, .4); }
.ck-btn.ck-line, .ck a.ck-btn.ck-line { background: var(--ck-white); color: var(--ck-navy); border-color: var(--ck-line); }
.ck-btn.ck-ghost, .ck a.ck-btn.ck-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; }
.ck-btn:focus-visible, .ck a:focus-visible, .ck button:focus-visible, .ck summary:focus-visible { outline: 3px solid var(--ck-amber); outline-offset: 3px; }

/* hero with floating tickets */
.ck-hero { position: relative; overflow: hidden; padding-block: clamp(44px, 7vw, 90px); background: radial-gradient(60% 80% at 85% 30%, #fff3d6 0%, rgba(255, 243, 214, 0) 60%), linear-gradient(135deg, #eaf6f0, #eef4fb); }
.ck-hero.ck-hero-dark { background: radial-gradient(90% 80% at 75% 20%, #1e4b74 0%, #0f2b48 45%, var(--ck-deep) 100%); color: #fff; }
.ck-herogrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 5vw, 64px); align-items: center; }
.ck-crumb { font-size: .82rem; color: var(--ck-muted); margin-bottom: 16px; }
.ck-hero-dark .ck-crumb { color: #9fb4c7; }
.ck-crumb a { color: inherit; }
.ck-hero h1 { margin-top: 10px; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.03; font-weight: 800; letter-spacing: -.03em; }
.ck-hero h1 em { font-style: normal; color: var(--ck-teal); }
.ck-hero-dark h1 em { color: var(--ck-amber); }
.ck-hero-dark .ck-eyebrow { color: var(--ck-mint); }
.ck-lead { margin-top: 16px !important; color: var(--ck-muted); font-size: 1.1rem; max-width: 58ch; }
.ck-hero-dark .ck-lead { color: #c6d6e5; }
.ck-hero .ck-btns { margin-top: 24px; }
.ck-stack { display: grid; gap: 14px; }
.ck-ticket { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--ck-white); color: var(--ck-navy); border: 1px solid var(--ck-line); border-radius: 20px; padding: 16px 18px;
  box-shadow: 0 18px 40px rgba(11, 23, 38, .12); opacity: 0; animation: ck-in .8s cubic-bezier(.2, .8, .2, 1) forwards, ck-float 6s ease-in-out 1s infinite alternate; }
.ck-ticket:nth-child(1) { animation-delay: .15s, 1s; margin-right: 12%; }
.ck-ticket:nth-child(2) { animation-delay: .35s, 1.6s; margin-left: 8%; background: #fffaf0; border-color: #f4dea0; }
.ck-ticket:nth-child(3) { animation-delay: .55s, 2.2s; margin-right: 4%; }
.ck-ticket:nth-child(4) { animation-delay: .75s, 2.8s; margin-left: 10%; background: #fffaf0; border-color: #f4dea0; }
@keyframes ck-in { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ck-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.ck-ticket .ck-ico { width: 48px; height: 48px; }
.ck-ticket small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-teal); }
.ck-ticket b { display: block; font-size: 1.12rem; font-weight: 800; }
.ck-ticket em { display: block; font-style: normal; font-size: .82rem; color: var(--ck-muted); }
.ck-ticket > i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ck-teal); color: #fff; font-weight: 800; }
@media (max-width: 900px) { .ck-herogrid { grid-template-columns: 1fr; } .ck-ticket:nth-child(n) { margin: 0; } }

/* cards */
.ck-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.55rem; background: #eaf1f8; flex: none; }
.ck-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.ck-card { background: var(--ck-white); border: 1px solid var(--ck-line); border-radius: 20px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: transform .3s ease, box-shadow .3s ease; }
.ck-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11, 23, 38, .1); }
.ck-card h3 { font-size: 1.15rem; font-weight: 800; }
.ck-card p { color: var(--ck-muted); font-size: .96rem; }
a.ck-card { text-decoration: none; color: inherit; }
.ck-card .ck-more { margin-top: 4px; font-weight: 800; color: var(--ck-teal); }
.ck-dark .ck-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.ck-dark .ck-card p { color: #c6d6e5; }
.ck-note { margin-top: 18px !important; border-radius: 16px; padding: 14px 18px; background: var(--ck-sand); border: 1px solid #f4dea0; color: #5a4310; max-width: 900px; }
.ck-note a { font-weight: 800; }
@media (max-width: 960px) { .ck-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .ck-grid { grid-template-columns: 1fr; } }

/* tool frame */
.ck-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); background: var(--ck-white); color: var(--ck-navy); border: 1px solid var(--ck-line);
  border-radius: 26px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 24px 50px rgba(11, 23, 38, .08); }
@media (max-width: 900px) { .ck-tool { grid-template-columns: 1fr; } }
.ck-q { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.ck-q legend, .ck-q > label { display: block; padding: 0; margin-bottom: 10px; font-weight: 800; font-size: 1rem; }
.ck-opts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.ck-opt { position: relative; cursor: pointer; }
.ck-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ck-opt > span { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 10px; border-radius: 16px; border: 1.5px solid var(--ck-line); background: var(--ck-paper); transition: all .2s ease; height: 100%; }
.ck-opt i { font-style: normal; font-size: 1.5rem; line-height: 1.2; }
.ck-opt b { font-size: .92rem; }
.ck-opt small { font-size: .76rem; color: var(--ck-muted); }
.ck-opt:hover > span { transform: translateY(-2px); }
.ck-opt input:checked + span { border-color: var(--ck-navy); background: #eef4fb; box-shadow: 0 10px 22px rgba(19, 50, 79, .12); }
.ck-opt input:focus-visible + span { outline: 3px solid var(--ck-amber); outline-offset: 2px; }
@media (max-width: 520px) { .ck-opts { grid-template-columns: 1fr 1fr; } }
.ck-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin-top: 12px; border-radius: 6px; cursor: pointer;
  background: linear-gradient(90deg, var(--ck-teal) 0%, var(--ck-amber) var(--fill, 30%), #e3ebf2 var(--fill, 30%)); }
.ck-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid var(--ck-navy); box-shadow: 0 4px 12px rgba(11, 23, 38, .25); }
.ck-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--ck-navy); }
.ck-bigval { display: block; font-size: clamp(2rem, 4.6vw, 2.8rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ck-res { display: grid; gap: 12px; align-content: start; }
.ck-hero-box { border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, #1e4b74 0%, #102F48 60%); color: #fff; padding: 20px 22px; display: grid; gap: 4px; }
.ck-hero-box small { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-mint); }
.ck-hero-box b { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; font-weight: 800; color: var(--ck-amber); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ck-hero-box span { color: #d5e2ef; font-size: .92rem; }
.ck-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-cells div { border-radius: 14px; background: var(--ck-mintbg); padding: 12px 14px; display: grid; gap: 2px; }
.ck-cells b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ck-cells span { font-size: .82rem; color: var(--ck-muted); }
.ck-stackbar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--ck-paper); }
.ck-stackbar i { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ck-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--ck-muted); }
.ck-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ck-legend b { color: var(--ck-navy); font-variant-numeric: tabular-nums; }
.ck-c1 { background: #102F48; } .ck-c2 { background: var(--ck-amber); } .ck-c3 { background: var(--ck-teal); }
.ck-bump { animation: ck-bump .35s ease; }
@keyframes ck-bump { 40% { transform: scale(1.04); } }

/* one-question-at-a-time engine (English test, career test, matcher) */
.ck-quiz { position: relative; max-width: 780px; margin: 0 auto; background: var(--ck-white); color: var(--ck-navy); border: 1px solid var(--ck-line); border-radius: 26px; padding: clamp(20px, 4vw, 40px); box-shadow: 0 24px 50px rgba(11, 23, 38, .08); display: grid; gap: 18px; min-height: 380px; align-content: start; }
.ck-qtop { display: grid; gap: 8px; }
.ck-qcount { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-teal); display: flex; justify-content: space-between; gap: 10px; }
.ck-qcount em { font-style: normal; color: var(--ck-muted); }
.ck-qbar { height: 8px; border-radius: 4px; background: var(--ck-paper); overflow: hidden; }
.ck-qbar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--ck-teal), var(--ck-amber)); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.ck-qq { display: none; gap: 14px; }
.ck-qq.on { display: grid; animation: ck-slide .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes ck-slide { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.ck-qq h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.2; font-weight: 800; }
.ck-qq .ck-ctx { color: var(--ck-muted); font-size: .95rem; }
.ck-qq .ck-ctx b { color: var(--ck-navy); }
.ck-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-ans.ck-col { grid-template-columns: 1fr; }
.ck-ans button { font: inherit; text-align: left; font-weight: 700; color: var(--ck-navy); padding: 15px 18px; border-radius: 16px; border: 1.5px solid var(--ck-line); background: var(--ck-paper); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.ck-ans button:hover:not(:disabled) { border-color: var(--ck-navy); background: #eef4fb; transform: translateY(-2px); }
.ck-ans button:disabled { cursor: default; }
.ck-ans button.ok { border-color: var(--ck-teal); background: var(--ck-mintbg); color: #0f5c47; }
.ck-ans button.ok::after { content: "  ✓"; font-weight: 800; }
.ck-ans button.ko { border-color: var(--ck-coral); background: #fdeeea; color: #8a2d16; }
.ck-ans button.ko::after { content: "  ✗"; font-weight: 800; }
.ck-ans button.sel { border-color: var(--ck-navy); background: #eef4fb; }
@media (max-width: 560px) { .ck-ans { grid-template-columns: 1fr; } }
.ck-why { border-radius: 14px; padding: 12px 16px; background: var(--ck-sand); border: 1px solid #f4dea0; color: #5a4310; font-size: .95rem; animation: ck-slide .35s ease; }
.ck-qnav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ck-back { font: inherit; font-weight: 700; color: var(--ck-muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.ck-qres { display: grid; gap: 14px; justify-items: start; animation: ck-slide .5s cubic-bezier(.2, .8, .2, 1); }
.ck-qres h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.15; font-weight: 800; }
.ck-qres > p { color: #33465b; font-size: 1.04rem; }
.ck-score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ck-level { display: grid; gap: 2px; }
.ck-level small { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-teal); }
.ck-level b { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; }
.ck-level span { color: var(--ck-muted); font-size: .92rem; }
.ck-mr { border-radius: 20px; padding: 20px; background: linear-gradient(160deg, #eef8f3, #eef4fb); border: 1px solid #cfe6dc; display: grid; gap: 8px; width: 100%; }
.ck-mr h4 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.ck-mr ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: #33465b; }
.ck-unis { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-unis span { font-size: .82rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--ck-white); border: 1px solid var(--ck-line); }

/* checklist */
.ck-checkwrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .ck-checkwrap { grid-template-columns: 1fr; } }
.ck-checkside { position: sticky; top: calc(var(--ck-top, 0px) + 20px); display: grid; gap: 14px; }
.ck-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--ck-paper); border: 1px solid var(--ck-line); }
.ck-seg label { position: relative; cursor: pointer; }
.ck-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ck-seg span { display: inline-block; padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: .92rem; transition: background .2s ease, color .2s ease; }
.ck-seg input:checked + span { background: #102F48; color: #fff; }
.ck-seg input:focus-visible + span { outline: 3px solid var(--ck-amber); outline-offset: 2px; }
.ck-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ck-checklist li label { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--ck-white); border: 1px solid var(--ck-line); cursor: pointer; transition: border-color .25s ease, background .25s ease; }
.ck-checklist input { position: absolute; opacity: 0; pointer-events: none; }
.ck-checklist i { margin-top: 2px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #c4d4e3; position: relative; transition: background .25s ease, border-color .25s ease; }
.ck-checklist i::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .25s cubic-bezier(.2, .8, .3, 1.6); }
.ck-checklist input:checked + label { border-color: #bfe3d4; background: #f5fbf8; }
.ck-checklist input:checked + label i { background: var(--ck-teal); border-color: var(--ck-teal); }
.ck-checklist input:checked + label i::after { transform: rotate(45deg) scale(1); }
.ck-checklist input:focus-visible + label { outline: 3px solid var(--ck-amber); outline-offset: 2px; }
.ck-checklist b { display: block; }
.ck-checklist span { display: block; color: var(--ck-muted); font-size: .9rem; }
.ck-checklist input:checked + label b { text-decoration: line-through; text-decoration-color: rgba(29, 138, 108, .5); }
.ck-tag { display: inline-block !important; margin-top: 6px; font-size: .72rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-teal) !important; }

/* «Mi solicitud» demo */
.ck-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .ck-demo { grid-template-columns: 1fr; } }
.ck-steps-tabs { display: grid; gap: 10px; }
.ck-steps-tabs button { font: inherit; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--ck-line); background: var(--ck-white); color: var(--ck-navy); cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ck-steps-tabs button i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--ck-paper); color: var(--ck-muted); transition: background .25s ease, color .25s ease; }
.ck-steps-tabs button b { display: block; }
.ck-steps-tabs button span { display: block; color: var(--ck-muted); font-size: .9rem; }
.ck-steps-tabs button[aria-selected="true"] { border-color: var(--ck-teal); box-shadow: 0 12px 26px rgba(29, 138, 108, .12); transform: translateX(6px); }
.ck-steps-tabs button[aria-selected="true"] i { background: var(--ck-teal); color: #fff; }
.ck-steps-tabs button.done i { background: var(--ck-mintbg); color: var(--ck-teal); }
.ck-phone { justify-self: center; width: min(320px, 100%); aspect-ratio: 9 / 18.5; border-radius: 40px; padding: 12px; background: #0b1726; box-shadow: 0 30px 60px rgba(11, 23, 38, .3); }
.ck-screen { height: 100%; border-radius: 30px; background: var(--ck-white); overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; }
.ck-scr-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 10px; font-weight: 800; }
.ck-scr-top span { width: 30px; height: 30px; border-radius: 50%; background: var(--ck-paper); }
.ck-scr-prog { margin: 0 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ck-scr-prog i { height: 6px; border-radius: 3px; background: var(--ck-line); transition: background .4s ease; }
.ck-scr-prog i.on { background: var(--ck-teal); }
.ck-scr-body { padding: 18px; display: grid; gap: 10px; align-content: start; }
.ck-scr-panel { display: none; gap: 10px; }
.ck-scr-panel.on { display: grid; animation: ck-slide .45s ease; }
.ck-scr-panel small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ck-teal); }
.ck-scr-panel b { font-size: 1.1rem; }
.ck-scr-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ck-line); font-size: .86rem; font-weight: 700; }
.ck-scr-row em { font-style: normal; font-size: .72rem; padding: 3px 8px; border-radius: 999px; background: var(--ck-mintbg); color: #0f5c47; }
.ck-scr-row em.wait { background: var(--ck-sand); color: #8a5a00; }
.ck-scr-cta { margin-top: 4px; padding: 11px; border-radius: 12px; text-align: center; font-weight: 800; font-size: .88rem; background: var(--ck-amber); }

/* timeline that fills as you scroll */
.ck-time { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: 16px; counter-reset: t; }
.ck-time::before, .ck-time::after { content: ""; position: absolute; left: 15px; top: 16px; width: 3px; border-radius: 2px; }
.ck-time::before { bottom: 16px; background: var(--ck-line); }
.ck-time::after { height: calc((100% - 32px) * var(--fillk, 0)); background: linear-gradient(180deg, var(--ck-teal), var(--ck-amber)); }
.ck-time li { position: relative; z-index: 1; counter-increment: t; background: var(--ck-white); border: 1px solid var(--ck-line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; transition: border-color .3s ease, box-shadow .3s ease; }
.ck-time li::before { content: counter(t); position: absolute; left: -44px; top: 12px; width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--ck-muted); background: var(--ck-white); border: 2px solid var(--ck-line); transition: all .3s ease; }
.ck-time li.on { border-color: #bfe3d4; box-shadow: 0 12px 26px rgba(29, 138, 108, .1); }
.ck-time li.on::before { background: var(--ck-teal); border-color: var(--ck-teal); color: #fff; }
.ck-time b { font-size: 1.06rem; }
.ck-time p { color: var(--ck-muted); font-size: .94rem; }
.ck-time small { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ck-teal); }
.ck-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ck-split > .ck-head { position: sticky; top: calc(var(--ck-top, 0px) + 24px); }
@media (max-width: 860px) { .ck-split { grid-template-columns: 1fr; } .ck-split > .ck-head { position: static; } }

/* faq */
.ck-faq { display: grid; gap: 10px; }
.ck-faq details { border: 1px solid var(--ck-line); border-radius: 16px; background: var(--ck-white); transition: box-shadow .3s ease, border-color .3s ease; }
.ck-faq details[open] { border-color: #bfe3d4; box-shadow: 0 12px 26px rgba(29, 138, 108, .08); }
.ck-faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 800; position: relative; }
.ck-faq summary::-webkit-details-marker { display: none; }
.ck-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ck-mintbg); color: var(--ck-teal); font-size: 1.2rem; transition: transform .3s ease; }
.ck-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ck-faq details p { padding: 0 20px 18px; color: #33465b; }

/* simple data table */
.ck-tablebox { overflow-x: auto; border: 1px solid var(--ck-line); border-radius: 18px; background: var(--ck-white); }
.ck-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.ck-table th, .ck-table td { padding: 13px 16px; border-bottom: 1px solid var(--ck-line); text-align: left; vertical-align: top; }
.ck-table th { background: #102F48; color: #fff; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.ck-table tr:last-child td { border-bottom: 0; }
.ck-table td b { color: var(--ck-navy); }

/* closing */
.ck-cta { text-align: center; background: linear-gradient(180deg, #fff 0%, #fff4dc 100%); }
.ck-cta .ck-c { display: grid; justify-items: center; gap: 14px; }
.ck-cta h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; max-width: 24ch; }
.ck-cta .ck-c > p:not(.ck-fine) { color: var(--ck-muted); font-size: 1.08rem; }

/* homepage: free tools strip */
.ck-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ck-toolcard { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 22px; text-decoration: none; color: #fff; background: var(--g, #102F48); box-shadow: 0 14px 30px rgba(11, 23, 38, .16); transition: transform .3s ease, box-shadow .3s ease; }
.ck-toolcard:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(11, 23, 38, .24); }
.ck-toolcard i { font-style: normal; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.6rem; background: rgba(255, 255, 255, .16); }
.ck-toolcard b { font-size: 1.15rem; }
.ck-toolcard span { color: rgba(255, 255, 255, .86); font-size: .92rem; }
.ck-toolcard em { font-style: normal; font-weight: 800; margin-top: 4px; }
.ck-toolcard::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: transform .5s ease; }
.ck-toolcard:hover::after { transform: scale(1.4); }
@media (max-width: 1000px) { .ck-tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ck-tools { grid-template-columns: 1fr; } }

/* phone: bar fixed at the bottom with WhatsApp and course search */
.ck-mbar { display: none; }
@media (max-width: 760px) {
  .ck-mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--ck-line); box-shadow: 0 -10px 30px rgba(11, 23, 38, .1); transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .ck-mbar.on { transform: none; }
  .ck-mbar a { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; font-weight: 800; text-decoration: none; }
  .ck-mbar .wa { background: #167E79; color: #fff; }
  .ck-mbar .cs { background: var(--ck-amber); color: var(--ck-navy); }
}

.ck.ck-still .ck-rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ck *, .ck *::before, .ck *::after { animation: none !important; transition: none !important; }
  .ck-rv, .ck-ticket { opacity: 1; transform: none; }
}
.ck-toolcard.ck-feat { grid-column: span 2; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; padding: 26px 28px; }
.ck-toolcard.ck-feat > * { grid-column: 1; }
.ck-toolcard.ck-feat b { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; }
.ck-toolcard.ck-feat small { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-amber); }
.ck-toolcard.ck-feat svg { grid-column: 2; grid-row: 1 / span 5; width: clamp(92px, 12vw, 140px); height: auto; }
.ck-toolcard.ck-feat svg polygon.sh { animation: ck-breath 4s ease-in-out infinite alternate; transform-origin: 60px 60px; }
@keyframes ck-breath { from { transform: scale(.82); } to { transform: scale(1); } }
@media (max-width: 520px) { .ck-toolcard.ck-feat { grid-column: auto; grid-template-columns: 1fr; } .ck-toolcard.ck-feat svg { display: none; } }
.ck a.ck-toolcard { color: #fff; }
/* ======================================================================
   v2 · the CalmaLink motion layer: «Calma» (slow auroras that breathe) + «Link» (nodes and golden threads that connect)
   ====================================================================== */

/* hero: auroras, link network, words that arrive one by one */
.ck-hero > .ck-c { position: relative; z-index: 2; }
.ck-hero::before, .ck-hero::after { content: ""; position: absolute; z-index: 0; width: 46vmax; height: 46vmax; border-radius: 50%; pointer-events: none; filter: blur(50px); }
.ck-hero::before { left: -14vmax; top: -20vmax; background: radial-gradient(circle, rgba(29, 138, 108, .32), transparent 62%); animation: ck-drift 19s ease-in-out infinite alternate; }
.ck-hero::after { right: -16vmax; bottom: -24vmax; background: radial-gradient(circle, rgba(242, 195, 90, .38), transparent 62%); animation: ck-drift2 23s ease-in-out infinite alternate; }
.ck-hero-dark::before { background: radial-gradient(circle, rgba(159, 227, 201, .2), transparent 62%); }
.ck-hero-dark::after { background: radial-gradient(circle, rgba(242, 195, 90, .2), transparent 62%); }
@keyframes ck-drift { to { transform: translate(16vmax, 9vmax) scale(1.18); } }
@keyframes ck-drift2 { to { transform: translate(-13vmax, -11vmax) scale(.88); } }
.ck-net { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ck-w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(3deg); animation: ck-word .75s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 55ms + .08s); }
@keyframes ck-word { to { opacity: 1; transform: none; } }
.ck-hero h1 em { background: linear-gradient(var(--ck-amber), var(--ck-amber)) no-repeat 0 94% / 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: ck-underline .9s cubic-bezier(.6, 0, .2, 1) 1s forwards; }
.ck-hero-dark h1 em { background-position: 0 100%; }
.ck-hero-dark h1 em, .ck-hero-dark h1 em .ck-w { padding-bottom: .02em; }
@keyframes ck-underline-dark { to { background-size: 100% .06em; } }
.ck-hero-dark h1 em { animation-name: ck-underline-dark; }
@keyframes ck-underline { to { background-size: 100% .14em; } }
.ck-ticket { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.ck-ticket:hover { box-shadow: 0 26px 50px rgba(11, 23, 38, .2); }
.ck-ticket:hover > i { animation: ck-spin .6s ease; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-ticket .ck-ico { animation: ck-bob 3.2s ease-in-out infinite; }
.ck-ticket:nth-child(2) .ck-ico { animation-delay: -1s; } .ck-ticket:nth-child(3) .ck-ico { animation-delay: -2s; }
@keyframes ck-bob { 50% { transform: translateY(-4px) rotate(-6deg); } }

/* buttons: a light sweep on the main call to action, a ring that breathes on WhatsApp */
.ck-btn.ck-amber { position: relative; overflow: hidden; isolation: isolate; }
.ck-btn.ck-amber::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-130%); animation: ck-shine 5s ease-in-out infinite; }
@keyframes ck-shine { 0%, 72% { transform: translateX(-130%); } 92%, 100% { transform: translateX(130%); } }
.ck-btn:active { transform: scale(.97); }

/* cards: 3D tilt with a soft glare that follows the pointer, icons that wake up */
.ck-card, .ck-toolcard { position: relative; overflow: hidden; }
.ck-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), transparent 45%); mix-blend-mode: soft-light; }
.ck-toolcard .ck-glare { background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 50%); mix-blend-mode: normal; }
.ck-tilting .ck-glare { opacity: 1; }
.ck-tilting { transition: transform .12s ease-out, box-shadow .3s ease !important; }
.ck-card .ck-ico, .ck-toolcard i { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.ck-card:hover .ck-ico, .ck-toolcard:hover i { transform: rotate(-10deg) scale(1.16); }
.ck-rv.in .ck-ico { animation: ck-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0s) + .2s); }
@keyframes ck-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.ck-fl { position: absolute; z-index: 1; pointer-events: none; font-size: 1.3rem; animation: ck-float-up 1.8s ease-out forwards; }
@keyframes ck-float-up { from { opacity: 0; transform: translateY(0) scale(.6) rotate(0); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-120px) scale(1.15) rotate(var(--r, 20deg)); } }

/* the golden thread between sections */
.ck-thread { position: relative; height: 70px; margin: -35px 0; z-index: 3; pointer-events: none; }
.ck-thread svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ck-thread path { fill: none; stroke: var(--ck-amber); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.6, 0, .2, 1); }
.ck-thread .knot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) 1.2s; }
.ck-thread .ring { fill: none; stroke: var(--ck-amber); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.ck-thread.in path { stroke-dashoffset: 0; }
.ck-thread.in .knot { transform: scale(1); }
.ck-thread.in .ring { animation: ck-ring 2.6s ease-out 1.8s infinite; }
@keyframes ck-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }

/* timeline: a marker that travels with your scroll */
.ck-time-dot { position: absolute; left: 4px; top: calc(16px + (100% - 32px) * var(--fillk, 0)); z-index: 2; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; border-radius: 50%; background: var(--ck-white); box-shadow: 0 0 0 4px rgba(242, 195, 90, .35), 0 8px 18px rgba(11, 23, 38, .2); font-style: normal; font-size: 15px; transition: top .15s linear; }
.ck-time-dot:empty::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ck-amber); }
.ck-time li { transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease; }
.ck-time li:not(.on) { transform: translateX(14px); }

/* confetti and flying papers live on <body> */
.ck-confetti { position: fixed; z-index: 95; width: 9px; height: 13px; margin: -6px 0 0 -4px; border-radius: 2px; pointer-events: none; }
.ck-flyer { position: fixed; z-index: 95; pointer-events: none; font-size: 22px; line-height: 1; }

/* ---------- pathway quiz: a boarding pass ---------- */
.ck-quiz { overflow: hidden; }
.ck-quiz::before { content: ""; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 195, 90, .22), transparent 65%); pointer-events: none; }
.ck-ans button { position: relative; overflow: hidden; }
.ck-ans button::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(29, 138, 108, .18), transparent 60%); opacity: 0; transition: opacity .3s ease; }
.ck-ans button:hover::before { opacity: 1; }
.ck-ans button.sel { animation: ck-press .35s ease; }
@keyframes ck-press { 40% { transform: scale(.96); } }
.ck-pass { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; width: 100%; border-radius: 22px; overflow: hidden; background: var(--ck-white); color: var(--ck-navy); box-shadow: 0 30px 60px rgba(11, 23, 38, .18); border: 1px solid var(--ck-line); }
.ck-printed .ck-pass { animation: ck-print 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ck-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-30px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.ck-pass-main { padding: 20px 22px; display: grid; gap: 14px; }
.ck-pass-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -20px -22px 0; padding: 12px 22px; background: linear-gradient(100deg, #102F48, #1e4b74); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ck-pass-top b { color: var(--ck-amber); letter-spacing: .04em; font-size: .95rem; text-transform: none; }
.ck-pass-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ck-pass-route small, .ck-pass-fields small, .ck-pass-stub small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ck-muted); }
.ck-pass-route b { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 800; line-height: 1.1; }
.ck-pass-route > div:last-child { text-align: right; }
.ck-arcbox path { fill: none; stroke: #c4d4e3; stroke-width: 2; stroke-dasharray: 5 6; }
.ck-plane { position: absolute; left: 0; top: 0; font-size: 22px; offset-anchor: center; offset-path: path("M 0 40 Q 60 -6 120 40"); offset-rotate: auto 45deg; animation: ck-fly 3s ease-in-out infinite; }
@keyframes ck-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ck-arcbox { position: relative; width: 120px; height: 50px; justify-self: center; }
.ck-arcbox svg { width: 120px; height: 50px; overflow: visible; }
.ck-pass .ck-mr { background: none; border: 0; padding: 0; }
.ck-pass-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 2px dashed var(--ck-line); }
.ck-pass-fields b { font-size: 1rem; font-weight: 800; }
.ck-pass-stub { position: relative; padding: 20px 16px; display: grid; gap: 10px; align-content: space-between; background: var(--ck-sand); border-left: 2px dashed #e7cf8f; }
.ck-pass-stub::before, .ck-pass-stub::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--ck-white); border: 1px solid var(--ck-line); }
.ck-pass-stub::before { top: -13px; } .ck-pass-stub::after { bottom: -13px; }
.ck-pass-stub b { font-size: 1.4rem; font-weight: 800; letter-spacing: .04em; }
.ck-bars { height: 54px; background: repeating-linear-gradient(90deg, #102F48 0 2px, transparent 2px 4px, #102F48 4px 5px, transparent 5px 8px, #102F48 8px 11px, transparent 11px 13px); border-radius: 3px; }
@media (max-width: 600px) {
  .ck-pass { grid-template-columns: 1fr; }
  .ck-pass-stub { border-left: 0; border-top: 2px dashed #e7cf8f; grid-template-columns: 1fr auto; align-items: center; }
  .ck-pass-stub::before, .ck-pass-stub::after { top: -13px; bottom: auto; left: -13px; }
  .ck-pass-stub::after { left: auto; right: -13px; }
  .ck-bars { width: 110px; height: 40px; }
  .ck-pass-fields { grid-template-columns: 1fr 1fr; }
}

/* ---------- budget: 28 days that fill up ---------- */
.ck-28 { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.ck-28 i { aspect-ratio: 1; border-radius: 5px; background: var(--ck-paper); border: 1px solid var(--ck-line); display: grid; place-items: center; font-style: normal; font-size: .6rem; font-weight: 800; color: #465B6B; }
.ck-28.go i { animation: ck-day .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes ck-day { from { transform: scale(.4); background: var(--ck-paper); color: #465B6B; } to { transform: none; background: var(--ck-teal); border-color: var(--ck-teal); color: #fff; } }
.ck-28.go i:last-child { animation-name: ck-day-last; }
@keyframes ck-day-last { from { transform: scale(.4); } 70% { transform: scale(1.3); } to { transform: none; background: var(--ck-amber); border-color: var(--ck-amber); color: var(--ck-navy); } }
.ck-28box { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--ck-line); }
.ck-28box p { font-size: .84rem; color: var(--ck-muted); }
.ck-28box b { color: var(--ck-navy); }
.ck-stackbar { height: 20px; border-radius: 10px; }
.ck-stackbar i { background-image: linear-gradient(45deg, rgba(255, 255, 255, .14) 25%, transparent 25% 50%, rgba(255, 255, 255, .14) 50% 75%, transparent 75%); background-size: 18px 18px; animation: ck-stripes 1.2s linear infinite; }
@keyframes ck-stripes { to { background-position: 18px 0; } }
.ck-hero-box { position: relative; overflow: hidden; }
.ck-hero-box::after { content: "💷"; position: absolute; right: 16px; top: 50%; font-size: 3.4rem; opacity: .16; transform: translateY(-50%) rotate(-14deg); animation: ck-bob 4s ease-in-out infinite; }

/* ---------- English test: a game with levels, streak and points ---------- */
.ck-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-streak, .ck-xp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--ck-paper); border: 1px solid var(--ck-line); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .3s ease; }
.ck-streak.hot { background: #fff1e6; border-color: #ffc89a; color: #b5462c; }
.ck-streak.bump, .ck-xp.bump { transform: scale(1.18); }
.ck-levels { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.ck-levels li { position: relative; display: flex; align-items: center; }
.ck-levels li + li::before { content: ""; width: clamp(14px, 4vw, 44px); height: 3px; border-radius: 2px; background: var(--ck-line); transition: background .4s ease; }
.ck-levels li span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 800; background: var(--ck-paper); border: 2px solid var(--ck-line); color: #8fa0b2; transition: all .4s cubic-bezier(.3, 1.6, .5, 1); }
.ck-levels li.done span { background: var(--ck-mintbg); border-color: var(--ck-teal); color: var(--ck-teal); }
.ck-levels li.done + li::before, .ck-levels li.now::before { background: var(--ck-teal); }
.ck-levels li.now span { background: var(--ck-teal); border-color: var(--ck-teal); color: #fff; transform: scale(1.18); box-shadow: 0 0 0 6px rgba(29, 138, 108, .15); }
.ck-plus { position: absolute; z-index: 3; pointer-events: none; font-weight: 800; color: var(--ck-teal); animation: ck-plus 1s ease-out forwards; }
@keyframes ck-plus { from { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(-8px) scale(1.15); } to { opacity: 0; transform: translateY(-46px); } }
.ck-qq.ck-shake { animation: ck-shake .45s ease; }
@keyframes ck-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.ck-ans button.ok { animation: ck-good .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ck-good { 40% { transform: scale(1.05); } }
.ck-medal { position: relative; width: 120px; height: 120px; flex: none; display: grid; place-items: center; }
.ck-medal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--ck-amber), #ffe39a, var(--ck-amber), #e0a93a, var(--ck-amber)); animation: ck-rot 6s linear infinite; mask: radial-gradient(circle, transparent 52%, #000 53%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); }
.ck-medal b { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2a6a9e, #102F48); color: var(--ck-amber); font-size: 1.9rem; font-weight: 800; box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .25); }
.ck-qres:not([hidden]) .ck-medal { animation: ck-medal 1s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes ck-medal { from { transform: scale(0) rotate(-180deg); } }
@keyframes ck-rot { to { transform: rotate(360deg); } }

/* ---------- document checklist: papers fly into your file ---------- */
.ck-folder { position: relative; width: 170px; height: 132px; margin: 6px auto 4px; }
.ck-folder-back { position: absolute; inset: 14px 0 0; border-radius: 6px 14px 14px 14px; background: #d9a441; }
.ck-folder-back::before { content: ""; position: absolute; left: 0; top: -14px; width: 70px; height: 20px; border-radius: 8px 8px 0 0; background: #d9a441; }
.ck-papers { position: absolute; left: 14px; right: 14px; bottom: 26px; height: 96px; }
.ck-papers i { position: absolute; left: 6%; right: 6%; bottom: calc(var(--i) * 3px); height: 86px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transform: rotate(var(--r, 0deg)); background-image: repeating-linear-gradient(180deg, transparent 0 12px, #e3ebf2 12px 14px); background-position: 0 14px; animation: ck-paper-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes ck-paper-in { from { transform: translateY(-30px) rotate(var(--r, 0deg)); opacity: 0; } }
.ck-folder-front { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; border-radius: 10px 10px 14px 14px; background: linear-gradient(180deg, #f2c35a, #e5ad3c); box-shadow: 0 -2px 0 rgba(255, 255, 255, .35) inset; display: grid; place-items: center; transform-origin: bottom; transition: transform .35s ease; }
.ck-folder.gulp .ck-folder-front { transform: perspective(300px) rotateX(-18deg); }
.ck-folder-front b { font-size: 1.5rem; font-weight: 800; color: var(--ck-navy); font-variant-numeric: tabular-nums; }
.ck-stamp { position: absolute; right: -14px; top: -6px; z-index: 2; padding: 6px 12px; border: 3px solid var(--ck-coral); border-radius: 10px; color: var(--ck-coral); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .9); transform: rotate(12deg) scale(0); opacity: 0; }
.ck-done .ck-stamp { animation: ck-stamp .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes ck-stamp { from { transform: rotate(12deg) scale(2.2); opacity: 0; } to { transform: rotate(12deg) scale(1); opacity: 1; } }
.ck-checklist li label { transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.ck-checklist li label:hover { transform: translateX(4px); }
.ck-checklist input:checked + label i { animation: ck-good .45s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- «Mi solicitud» demo: a phone that tilts and notifications that pop ---------- */
.ck-phone { transition: transform .2s ease-out; transform: perspective(1000px) rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg)); }
.ck-screen { position: relative; }
.ck-notif { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(19, 50, 79, .94); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.3; box-shadow: 0 14px 30px rgba(11, 23, 38, .3); transform: translateY(-130%); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.ck-notif.on { transform: none; }
.ck-notif i { font-style: normal; font-size: 1.1rem; }
.ck-scr-panel.on > * { animation: ck-slide .45s cubic-bezier(.2, .8, .2, 1) both; }
.ck-scr-panel.on > *:nth-child(2) { animation-delay: .06s; } .ck-scr-panel.on > *:nth-child(3) { animation-delay: .12s; } .ck-scr-panel.on > *:nth-child(4) { animation-delay: .18s; } .ck-scr-panel.on > *:nth-child(5) { animation-delay: .24s; } .ck-scr-panel.on > *:nth-child(6) { animation-delay: .3s; }
.ck-scr-row em { animation: ck-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: .5s; }

/* ---------- tools strip: cards that react ---------- */
.ck-toolcard::before { content: ""; position: absolute; left: -40px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .06); transition: transform .6s ease; }
.ck-toolcard:hover::before { transform: translate(30px, -20px) scale(1.3); }
.ck-toolcard em { transition: letter-spacing .3s ease; }
.ck-toolcard:hover em { letter-spacing: .03em; }
.ck-toolcard.ck-feat svg .orb { animation: ck-bob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---------- phone bar: WhatsApp breathes ---------- */
@media (max-width: 760px) { .ck-mbar .wa { position: relative; } .ck-mbar .wa::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 0 rgba(31, 138, 91, .5); animation: ck-wa 2.4s ease-out infinite; } }
@keyframes ck-wa { to { box-shadow: 0 0 0 12px rgba(31, 138, 91, 0); } }

/* everything still, finished and readable when motion is reduced */
.ck.ck-still .ck-w { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ck-w { opacity: 1 !important; transform: none !important; }
  .ck-hero h1 em { background-size: 100% .14em; }
  .ck-thread path { stroke-dashoffset: 0; } .ck-thread .knot { transform: none; }
  .ck-time li:not(.on) { transform: none; }
  .ck-hero::before, .ck-hero::after, .ck-plane, .ck-btn.ck-amber::after { animation: none !important; }
}
.ck.ck-still *, .ck.ck-still *::before, .ck.ck-still *::after { animation: none !important; }
@media (max-width: 560px) { .ck-levels li span { width: 30px; height: 30px; font-size: .68rem; } .ck-levels li + li::before { width: 8px; } .ck-streak, .ck-xp { padding: 5px 9px; font-size: .9rem; } .ck-folder { transform: scale(.9); } }
@media (max-width: 600px) { .ck-pass-route { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ck-arcbox { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- «Tú / Nosotros»: what the student does, what we do, linked by a golden thread ---------- */
.ck-duo { display: grid; grid-template-columns: minmax(0, .9fr) 90px minmax(0, 1.1fr); align-items: center; }
.ck-duo-card { border-radius: 26px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; align-content: start; }
.ck-duo-card small { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ck-duo-card h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.ck-duo-you { background: linear-gradient(160deg, #fffaf0, #fff3d6); border: 1px solid #f4dea0; box-shadow: 0 18px 40px rgba(201, 133, 0, .12); }
.ck-duo-you small { color: #9a6a00; }
.ck-duo-us { color: #fff; background: radial-gradient(90% 90% at 80% 10%, #1e4b74 0%, #102F48 55%, var(--ck-deep) 100%); box-shadow: 0 24px 50px rgba(11, 23, 38, .25); }
.ck-duo-us small { color: var(--ck-mint); }
.ck-duo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ck-duo li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .16s + .2s); }
.ck-duo li::before { content: "✓"; grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--ck-amber); color: var(--ck-navy); transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * .16s + .35s); }
.ck-duo-us li::before { background: var(--ck-teal); color: #fff; }
.ck-duo li b { font-size: 1.04rem; }
.ck-duo li span { font-size: .9rem; color: var(--ck-muted); }
.ck-duo-us li span { color: #b9cde0; }
.ck-duo.in li { opacity: 1; transform: none; }
.ck-duo.in li::before { transform: scale(1); }
.ck-duo-card .ck-btn { justify-self: start; margin-top: 4px; }
.ck-duo-link { position: relative; height: 40px; }
.ck-duo-link svg { width: 100%; height: 40px; overflow: visible; }
.ck-duo-link path { fill: none; stroke: var(--ck-amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 8; animation: ck-flow 1.2s linear infinite; }
@keyframes ck-flow { to { stroke-dashoffset: -28; } }
.ck-duo-link i { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--ck-amber); border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(242, 195, 90, .6); animation: ck-knot 2.2s ease-out infinite; }
@keyframes ck-knot { to { box-shadow: 0 0 0 16px rgba(242, 195, 90, 0); } }
@media (max-width: 860px) {
  .ck-duo { grid-template-columns: 1fr; }
  .ck-duo-link { height: 56px; width: 40px; justify-self: center; }
  .ck-duo-link svg { width: 56px; height: 40px; transform: rotate(90deg) translate(8px, 8px); }
}
@media (prefers-reduced-motion: reduce) { .ck-duo li { opacity: 1; transform: none; } .ck-duo li::before { transform: none; } }