/* ==========================================================================
   Cuantico — Módulos: catálogo interactivo y páginas de módulo.
   Se usa junto con sol.css. Portadas claras, distintas al resto del sitio.
   ========================================================================== */

/* ---------- Portada del catálogo ---------- */
.mh { position: relative; overflow: hidden; background: #fff; color: var(--navy); padding: calc(var(--header-h) + 56px) 0 clamp(56px, 7vw, 96px); }
.mh__bg i { position: absolute; border-radius: 50%; pointer-events: none; }
.mh__bg i:first-child { right: -12%; top: -20%; width: 62vw; height: 62vw; max-width: 880px; max-height: 880px; background: radial-gradient(circle, rgba(59, 154, 225, .2), transparent 66%); }
.mh__bg i:last-child { left: -10%; bottom: -30%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(27, 79, 156, .1), transparent 66%); }
.mh::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(27, 79, 156, .13) 1px, transparent 1.2px); background-size: 26px 26px; mask-image: linear-gradient(90deg, transparent 35%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); pointer-events: none; }
.mh__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mh__t { margin: 18px 0 22px; font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: .96; letter-spacing: -.055em; font-weight: 500; color: var(--navy); }
.mh__t b { font-weight: 600; color: var(--blue); } .mh__t .split-line { padding-bottom: .12em; margin-bottom: -.12em; } .mh__t .serif-i { font-size: 1.06em; color: var(--blue); }
.mh .lead { max-width: 52ch; color: #23364f; }
.mh__stats { display: flex; flex-wrap: wrap; gap: 12px 34px; list-style: none; margin: 30px 0 0; padding: 0; }
.mh__stats li { display: grid; } .mh__stats strong { font-size: 2.2rem; font-weight: 500; letter-spacing: -.04em; color: var(--blue); line-height: 1; } .mh__stats span { font-size: .82rem; color: #55667f; }
.mh__orb { --r: 190px; position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.mh__orb::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(27, 79, 156, .3); animation: mSpin 60s linear infinite; }
.mh__orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(27, 79, 156, .12); }
.mh__core { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .2), 0 30px 60px -20px rgba(27, 79, 156, .5); }
.mh__core img { width: 56%; }
.mh__orb ul { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; animation: mSpin 50s linear infinite; }
.mh__orb li { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translate(0, calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.mh__orb li span { display: inline-flex; align-items: center; gap: 8px; margin: -18px 0 0 -48px; padding: 8px 14px; border-radius: 999px; font-size: .84rem; font-weight: 550; color: var(--navy); white-space: nowrap; background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .18), 0 14px 30px -14px rgba(27, 79, 156, .5); animation: mSpinR 50s linear infinite; }
.mh__orb li svg { width: 16px; height: 16px; color: var(--blue); }
@keyframes mSpin { to { transform: rotate(360deg); } } @keyframes mSpinR { to { transform: rotate(-360deg); } }
@media (max-width: 980px) { .mh__grid { grid-template-columns: 1fr; } .mh__orb { --r: 145px; width: min(80%, 360px); } .mh__orb li { transform: rotate(var(--a)) translate(0, calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); } }

/* ---------- Buscador y filtros ---------- */
.mtool { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: grid; gap: 12px; padding: 14px; margin-bottom: 22px; border-radius: 20px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(11, 31, 58, .1), 0 24px 50px -30px rgba(11, 31, 58, .5); }
.msr { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .1); transition: box-shadow .3s, background .3s; }
.msr:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.msr svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.msr input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--navy); outline: none; }
.mfcs { display: flex; flex-wrap: wrap; gap: 8px; }
.mfc { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: .9rem; color: #23364f; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .2); transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--ease-spring); }
.mfc b { font-weight: 500; font-size: .74rem; padding: 1px 7px; border-radius: 999px; background: rgba(27, 79, 156, .1); color: var(--blue); }
.mfc:hover { box-shadow: inset 0 0 0 1px var(--blue); transform: translateY(-2px); }
.mfc.is-on { background: var(--navy); color: #fff; box-shadow: none; } .mfc.is-on b { background: rgba(255, 255, 255, .2); color: #fff; }
.mres { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .92rem; color: #55667f; } .mres b { color: var(--navy); font-weight: 600; }
.mreset { padding: 6px 14px; border-radius: 999px; font-size: .84rem; color: var(--blue); box-shadow: inset 0 0 0 1px rgba(27, 79, 156, .4); } .mreset:hover { background: var(--blue); color: #fff; }

/* ---------- Tarjetas ---------- */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mc { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 22px 58px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 31, 58, .08), 0 22px 44px -34px rgba(11, 31, 58, .4); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .4s; scroll-margin-top: calc(var(--header-h) + 90px); }
.mc.is-out { display: none; }
.mc.is-in-anim { animation: mcIn .5s var(--ease-out) backwards; }
@keyframes mcIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.mc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.mc:hover, .mc:focus-within { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 36px 60px -34px rgba(27, 79, 156, .55); }
.mc:hover::before, .mc:focus-within::before { transform: none; }
.mc__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mc__i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); box-shadow: 0 12px 22px -12px rgba(27, 79, 156, .8); transition: transform .5s var(--ease-spring); }
.mc:hover .mc__i { transform: rotate(-8deg) scale(1.08); } .mc__i svg { width: 22px; height: 22px; }
.mc__c { position: absolute; right: 18px; top: 22px; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #6a7b93; }
.mc h3 { margin-top: 12px; font-size: 1.3rem; font-weight: 550; letter-spacing: -.03em; color: var(--navy); }
.mc__d { font-size: .92rem; color: #3b4d66; line-height: 1.5; }
.mc__s { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; position: relative; z-index: 2; }
.mc__s li { border-radius: 999px; font-size: .76rem; color: #23364f; background: #eef3fa; transition: background .3s, color .3s; }
.mc__s li a { display: block; padding: 3px 10px; color: inherit; }
.mc__s li:hover { background: var(--blue); color: #fff; }
.mc__s li.more { display: none; } .mc__s li.cnt { padding: 3px 10px; color: var(--blue); background: transparent; box-shadow: inset 0 0 0 1px rgba(27, 79, 156, .3); pointer-events: none; }
.mc__s li.hit { background: var(--blue); color: #fff; }
.mgrid.is-search .mc__s li.more { display: block; } .mgrid.is-search .mc__s li.cnt { display: none; }
.mgrid.is-search .mc__s li:not(.hit) { opacity: .45; }
.mc__go { position: absolute; left: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 550; color: var(--blue); }
.mc__go svg { width: 16px; height: 16px; transition: transform .4s var(--ease-spring); } .mc:hover .mc__go svg { transform: translateX(6px); }
.mempty { padding: 40px 0; text-align: center; color: #55667f; } .mempty a { color: var(--blue); text-decoration: underline; }
/* ---------- Página de módulo ---------- */
.mh2 { position: relative; overflow: hidden; color: var(--navy); padding: calc(var(--header-h) + 56px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(60% 70% at 85% 20%, rgba(59, 154, 225, .28), transparent 70%), linear-gradient(180deg, #eaf4fc, #f7fafd); }
.mh2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.mh2__t { margin: 18px 0 22px; font-size: clamp(2.3rem, 4.8vw, 4.8rem); line-height: .98; letter-spacing: -.05em; font-weight: 500; color: var(--navy); }
.mh2__t .split-line { padding-bottom: .12em; margin-bottom: -.12em; } .mh2__t .serif-i { font-size: 1.06em; color: var(--blue); }
.mh2 .lead { max-width: 52ch; color: #23364f; }
.mh2__vis { position: relative; }
.mh2__vis .mon { box-shadow: 0 0 0 1px rgba(11, 31, 58, .14), 0 50px 90px -30px rgba(27, 79, 156, .55); }
.mh2__chips { position: absolute; inset: auto 0 -18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mh2__chips li { white-space: nowrap; padding: 7px 14px; font-size: .8rem; border-radius: 999px; font-size: .84rem; font-weight: 550; color: var(--navy); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .2), 0 14px 26px -14px rgba(27, 79, 156, .5); animation: solFloat 6s ease-in-out infinite; }
.mh2__chips li:nth-child(2) { animation-delay: -1.5s; } .mh2__chips li:nth-child(3) { animation-delay: -3s; } .mh2__chips li:nth-child(4) { animation-delay: -4.5s; }
@media (max-width: 980px) { .mh2__grid { grid-template-columns: 1fr; } .mh2__vis .mon { transform: none; } }

.mflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: f; }
.mflow li { position: relative; display: grid; gap: 4px; padding: 22px 18px; border-radius: 18px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); font-weight: 550; color: var(--navy); transition: transform .5s var(--ease-out), background .3s, box-shadow .3s; }
.mflow li:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 28px 50px -30px rgba(27, 79, 156, .5); }
.mflow li:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 14px; height: 2px; background: var(--blue); z-index: 1; }
.mflow b { font-size: .7rem; letter-spacing: .12em; color: var(--blue); } .mflow small { font-weight: 400; color: #55667f; font-size: .84rem; }
@media (max-width: 900px) { .mflow { grid-template-columns: 1fr 1fr; } .mflow li::after { display: none; } }

.mtabs { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.mt__l { display: grid; gap: 8px; }
.mt { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; padding: 14px 16px; text-align: left; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .14); background: transparent; color: var(--navy); font-weight: 550; transition: background .3s, color .3s, transform .4s var(--ease-out), box-shadow .3s; }
.mt b { font-size: .7rem; letter-spacing: .1em; color: var(--blue); }
.mt:hover { transform: translateX(6px); box-shadow: inset 0 0 0 1px var(--blue); }
.mt.is-on { background: var(--navy); color: #fff; transform: translateX(10px); box-shadow: 0 20px 40px -22px rgba(11, 31, 58, .8); } .mt.is-on b { color: #8fc9f2; }
.mp { display: grid; gap: 18px; animation: mcIn .5s var(--ease-out); }
.mp[hidden] { display: none; }
.mp h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.035em; color: var(--navy); } .mp__txt > p { margin: 8px 0 14px; color: #23364f; max-width: 60ch; }
.mp__ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .mp__ul li { display: flex; gap: 10px; align-items: center; color: #23364f; } .mp__ul svg { width: 16px; height: 16px; color: var(--ok, #1fa971); flex: none; }
.mp__img .mon { border-radius: 16px; }
.mp__gal { display: grid; gap: 1px; background: #dde5f0; }
.mg { margin: 0; background: #fff; } .mg figcaption { padding: 8px 14px 10px; font-size: .82rem; color: #55667f; }
.mg__b { position: relative; display: block; width: 100%; cursor: zoom-in; } .mg__b img { display: block; width: 100%; height: auto; }
.mg__z { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(11, 31, 58, .8); opacity: 0; transition: opacity .3s; } .mg__b:hover .mg__z, .mg__b:focus-visible .mg__z { opacity: 1; }
@media (max-width: 900px) { .mtabs { grid-template-columns: 1fr; } .mt__l { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; padding-bottom: 6px; } .mt:hover, .mt.is-on { transform: none; } }

.mrel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mrel a { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 550; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(27, 79, 156, .3); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.mrel a:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }

/* ---------- Ampliación de capturas ---------- */
.mzoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(8, 20, 38, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: mcIn .3s var(--ease-out); }
.mzoom[hidden] { display: none; }
.mzoom figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: grid; gap: 10px; }
.mzoom img { max-width: 100%; max-height: 80vh; border-radius: 12px; background: #fff; }
.mzoom figcaption { color: #dbe8f8; font-size: .9rem; text-align: center; }
.mzoom button { position: absolute; right: 20px; top: 20px; padding: 10px 18px; border-radius: 999px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .mzoom button:hover { background: #fff; color: var(--navy); }

@media (prefers-reduced-motion: reduce) { .mh__orb::before, .mh__orb ul, .mh__orb li span, .mh2__chips li, .mp, .mc.is-in-anim, .mzoom { animation: none !important; } }

/* ---------- Variantes de portada de módulo ---------- */
.mh2--mint { background: radial-gradient(60% 70% at 85% 20%, rgba(52, 200, 150, .24), transparent 70%), linear-gradient(180deg, #e7f7f0, #f6fbf9); }
.mh2--sand { background: radial-gradient(60% 70% at 85% 20%, rgba(240, 180, 90, .26), transparent 70%), linear-gradient(180deg, #fbf3e4, #fffaf1); }
.mh2--lilac { background: radial-gradient(60% 70% at 85% 20%, rgba(130, 110, 230, .22), transparent 70%), linear-gradient(180deg, #efeafc, #f9f7ff); }
.mh2--slate { background: radial-gradient(60% 70% at 85% 20%, rgba(27, 79, 156, .2), transparent 70%), linear-gradient(180deg, #e8edf4, #f5f7fa); }
.mh2--rev .mh2__grid > :first-child { order: 2; } .mh2--rev .mh2__grid > :last-child { order: 1; }
.mh2--rev .mon--tilt-r { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); }
.mh2__ico { display: grid; place-items: center; width: min(60%, 260px); aspect-ratio: 1; margin-inline: auto; border-radius: 32%; color: #fff; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); box-shadow: 0 40px 80px -30px rgba(27, 79, 156, .6); } .mh2__ico svg { width: 46%; height: 46%; }
.mh2--fn { padding-bottom: clamp(40px, 5vw, 70px); } .mh2--fn .container > .mh2__t { max-width: 22ch; }
.mh2__t { max-width: 20ch; }
@media (max-width: 980px) { .mh2--rev .mh2__grid > :first-child, .mh2--rev .mh2__grid > :last-child { order: 0; } }

.mflow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mflow--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mflow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mflow--3, .mflow--4, .mflow--6 { grid-template-columns: 1fr 1fr; } }
.mt__l--long { max-height: 620px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.mp--solo { max-width: 760px; }
.mdet { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .12); margin-bottom: 14px; }
.mdet summary { cursor: pointer; padding: 12px 16px; font-weight: 550; color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mdet summary::after { content: "+"; font-size: 1.3rem; color: var(--blue); transition: transform .3s; } .mdet[open] summary::after { transform: rotate(45deg); }
.mdet summary::-webkit-details-marker { display: none; }
.mdet ol { margin: 0; padding: 0 18px 14px 36px; display: grid; gap: 8px; color: #23364f; font-size: .95rem; }
.mp__act { display: flex; flex-wrap: wrap; gap: 10px; }
.mlink { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 550; font-size: .92rem; color: #fff; background: var(--blue); transition: background .3s, transform .35s var(--ease-spring); } .mlink svg { width: 16px; height: 16px; }
.mlink:hover { background: var(--navy); transform: translateY(-2px); }
.mlink--q { color: var(--navy); background: transparent; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .3); } .mlink--q:hover { color: #fff; }
.mben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.mben li { padding: 24px 22px; border-radius: 20px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); transition: transform .5s var(--ease-out), background .3s, box-shadow .3s; }
.mben li:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 0 0 1px rgba(27, 79, 156, .35), 0 28px 50px -30px rgba(27, 79, 156, .5); }
.mben strong { display: block; margin-bottom: 8px; font-size: 1.1rem; font-weight: 550; color: var(--navy); } .mben p { color: #3b4d66; font-size: .94rem; }
.mrelw { margin-top: clamp(28px, 4vw, 48px); } .mrelw .kick { margin-bottom: 12px; }
.mfn { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.mstep { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mstep li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 16px 18px; border-radius: 16px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .08); color: #23364f; }
.mstep b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: .72rem; color: #fff; background: linear-gradient(135deg, #3B9AE1, #1B4F9C); }
@media (max-width: 900px) { .mfn { grid-template-columns: 1fr; } }
/* ---------- Landings de submódulo ---------- */
.mfn--solo { grid-template-columns: 1fr; max-width: 760px; }
.lvid .mon { max-width: 980px; margin-inline: auto; } .lvid video { display: block; width: 100%; height: auto; background: #0B1F3A; }
.lnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(22px, 3vw, 36px); }
.lnav a { display: grid; gap: 4px; padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .1); transition: transform .4s var(--ease-out), box-shadow .3s; } .lnav a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 24px 44px -30px rgba(27, 79, 156, .5); }
.lnav small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); } .lnav strong { color: var(--navy); font-weight: 550; } .lnav__n { text-align: right; }
@media (max-width: 640px) { .lnav { grid-template-columns: 1fr; } .lnav__n { text-align: left; } }
.lead2 { max-width: 60ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; color: #23364f; }