/* ============================================================
   malapraxismedica.legal  ·  system.css
   Biblioteca de modulos reutilizables (prefijo mx-).
   Consume tokens.css. La usan home, paginas y todas las landings.
   Regla: ningun valor de color/tamano/espacio hardcodeado, todo var().
   Scope oscuro: envolver un bloque en .inv (definido en tokens.css)
   o usar los modulos *-dark indicados.
   ============================================================ */
@import url("tokens.css");

/* ---------- reset minimo ---------- */
*{box-sizing:border-box}
.mx-body{background:var(--sup-0);color:var(--ink);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mx-h1,.mx-h2,.mx-h3,.mx-h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-head);letter-spacing:var(--tr-tight);color:var(--ink);margin:0}
.mx-h1{font-size:var(--fs-h1)} .mx-h2{font-size:var(--fs-h2)} .mx-h3{font-size:var(--fs-h3)} .mx-h4{font-size:var(--fs-h4)}
.mx-mega{font-family:var(--font-display);font-weight:600;font-size:var(--fs-mega);line-height:var(--lh-mega);letter-spacing:-0.03em}
.mx-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-2)}
.mx-a{color:var(--acc);text-decoration:none}
.mx-a:hover{text-decoration:underline}
:where(.mx-body) :focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset);border-radius:var(--r-1)}

/* ---------- layout ---------- */
.mx-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.mx-wrap--narrow{max-width:var(--wrap-narrow)}
.mx-section{padding-block:var(--s-section)}
.mx-stack>*+*{margin-top:var(--s-4)}
.mx-grid{display:grid;gap:var(--s-5)}
.mx-grid--2{grid-template-columns:repeat(2,1fr)}
.mx-grid--3{grid-template-columns:repeat(3,1fr)}
.mx-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.mx-grid--4{grid-template-columns:repeat(2,1fr)}.mx-grid--3{grid-template-columns:1fr}}
@media(max-width:700px){.mx-grid--2,.mx-grid--4{grid-template-columns:1fr}}
.mx-hr{height:var(--bw);background:var(--line);border:0;margin:0}

/* ---------- tipografia utilitaria ---------- */
.mx-eyebrow{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--ink-3)}
.mx-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-mono)}
.mx-caption{font-size:var(--fs-caption);color:var(--ink-3)}

/* ---------- botones ---------- */
.mx-btn{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-text);font-weight:600;font-size:var(--fs-small);line-height:1;padding:0.9rem 1.25rem;border-radius:var(--r-2);border:var(--bw) solid transparent;cursor:pointer;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1),border-color var(--dur-1),color var(--dur-1);min-height:44px;text-decoration:none}
.mx-btn:active{transform:translateY(1px)}
.mx-btn--primary{background:var(--acc);color:var(--acc-ink)}
.mx-btn--primary:hover{background:var(--acc-press)}
.mx-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.mx-btn--ghost:hover{border-color:var(--ink)}
.mx-btn--quiet{background:var(--sup-2);color:var(--ink)}
.mx-btn--quiet:hover{background:var(--acc-soft)}
.mx-btn--link{padding:0;min-height:0;background:none;color:var(--acc);border:0}
.mx-btn--link:hover{text-decoration:underline}
.mx-btn--lg{font-size:var(--fs-body);padding:1.05rem 1.6rem}
.mx-btn[disabled],.mx-btn.is-disabled{opacity:.5;pointer-events:none}
.mx-btn.is-loading{color:transparent;position:relative;pointer-events:none}
.mx-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:var(--acc-ink);animation:mx-spin .7s linear infinite}
.mx-btn .mx-ar{transition:transform var(--dur-1) var(--ease-out)}
.mx-btn:hover .mx-ar{transform:translateX(3px)}
@keyframes mx-spin{to{transform:rotate(360deg)}}

/* ---------- tag / badge / pill ---------- */
.mx-tag{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--ink-3);border:var(--bw) solid var(--line-2);border-radius:var(--r-pill);padding:0.3rem 0.7rem}
.mx-tag--acc{color:var(--acc);border-color:var(--acc)}
.mx-tag--plazo{color:var(--plazo);border-color:var(--plazo)}
.mx-badge{display:inline-block;font-size:var(--fs-caption);font-weight:600;color:var(--acc);background:var(--acc-soft);border-radius:var(--r-1);padding:0.15rem 0.5rem}

/* ---------- header + nav ---------- */
.mx-site{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--sup-0) 88%,transparent);backdrop-filter:blur(10px);border-bottom:var(--bw) solid var(--line)}
.mx-site__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:64px}
.mx-brand{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:var(--tr-tight);display:inline-flex;gap:var(--s-2);color:var(--ink);text-decoration:none}
.mx-brand .dot{color:var(--acc)}
.mx-nav{display:flex;align-items:center;gap:var(--s-5)}
.mx-nav a{font-size:var(--fs-small);color:var(--ink-2);text-decoration:none}
.mx-nav a:hover{color:var(--ink)}

/* ---------- breadcrumbs ---------- */
.mx-crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:var(--fs-caption);color:var(--ink-3);font-family:var(--font-mono)}
.mx-crumbs a{color:var(--ink-3);text-decoration:none}
.mx-crumbs a:hover{color:var(--ink)}
.mx-crumbs li{display:flex;gap:var(--s-2);list-style:none}
.mx-crumbs li::after{content:"/";color:var(--line-2)}
.mx-crumbs li:last-child::after{content:""}
.mx-crumbs li:last-child{color:var(--ink)}

/* ---------- hero (variantes) ---------- */
.mx-hero{padding-top:clamp(2.5rem,7vw,6rem);padding-bottom:var(--s-7)}
.mx-hero__h{font-family:var(--font-display);font-weight:600;font-size:var(--fs-mega);line-height:var(--lh-mega);letter-spacing:-0.03em;margin:var(--s-4) 0 0}
.mx-hero__lead{max-width:52ch;margin-top:var(--s-5)}
.mx-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.mx-hero__rail{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-6);color:var(--ink-3)}
.mx-hero__rail span{font-size:var(--fs-caption)}
/* hero de landing: mas compacto, con miga + titular medio + subrayado de foco geo/tipo */
.mx-hero--landing .mx-hero__h{font-size:var(--fs-h1)}
.mx-hero--landing{padding-top:var(--s-6)}

/* ---------- section header ---------- */
.mx-shead{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-7)}
.mx-shead__t{font-size:var(--fs-h2);max-width:22ch;margin:0}
.mx-shead__lead{max-width:34ch}

/* ---------- marquesina ---------- */
.mx-marq{border-block:var(--bw) solid var(--line);overflow:hidden;padding-block:var(--s-5);background:var(--sup-0);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mx-marq__track{display:flex;width:max-content;gap:var(--s-7);animation:mx-marq 42s linear infinite}
.mx-marq:hover .mx-marq__track{animation-play-state:paused}
.mx-marq__it{display:inline-flex;align-items:center;gap:var(--s-7);white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);letter-spacing:var(--tr-tight);color:var(--ink);text-decoration:none}
.mx-marq__it::before{content:"//";font-family:var(--font-mono);font-weight:400;font-size:0.5em;color:var(--acc)}
a.mx-marq__it:hover{color:var(--acc)}
@keyframes mx-marq{to{transform:translateX(calc(-50% - var(--s-7)/2))}}

/* ---------- tarjeta de problema / situacion ---------- */
.mx-probs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bw);background:var(--line);border:var(--bw) solid var(--line)}
@media(max-width:640px){.mx-probs{grid-template-columns:1fr}}
.mx-prob{background:var(--sup-0);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;transition:background var(--dur-1)}
.mx-prob:hover{background:var(--sup-1)}
.mx-prob__q{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);letter-spacing:var(--tr-tight);line-height:var(--lh-tight);color:var(--ink)}
.mx-prob__d{color:var(--ink-3);font-size:var(--fs-small)}
.mx-prob__go{margin-top:auto;color:var(--acc);font-size:var(--fs-caption);font-weight:600;display:inline-flex;gap:var(--s-2)}

/* ---------- tarjeta generica (servicio/feature) ---------- */
.mx-card{border:var(--bw) solid var(--line);border-radius:var(--r-2);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);background:var(--sup-0);text-decoration:none;transition:border-color var(--dur-1),transform var(--dur-1)}
.mx-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.mx-card__icon{width:40px;height:40px;border-radius:var(--r-1);background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--fs-caption)}
.mx-card__t{font-size:var(--fs-h4);color:var(--ink)}
.mx-card__d{color:var(--ink-2);font-size:var(--fs-small)}

/* ---------- datos de autoridad (cualitativos, NO contador de trofeos) ---------- */
.mx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);border-top:var(--bw) solid var(--ink);padding-top:var(--s-5)}
@media(max-width:700px){.mx-facts{grid-template-columns:1fr}}
.mx-fact__k{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);letter-spacing:var(--tr-mono)}
.mx-fact__v{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);margin-top:var(--s-1);color:var(--ink)}
.mx-fact__d{color:var(--ink-2);font-size:var(--fs-small);margin-top:var(--s-2)}

/* ---------- proceso / stepper con indice sticky ---------- */
.mx-proc{display:grid;grid-template-columns:0.42fr 0.58fr;gap:var(--s-8)}
@media(max-width:820px){.mx-proc{grid-template-columns:1fr;gap:var(--s-6)}}
.mx-proc__aside{position:sticky;top:88px;align-self:start}
@media(max-width:820px){.mx-proc__aside{position:static}}
.mx-proc__idx{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-1)}
@media(max-width:820px){.mx-proc__idx{display:none}}
.mx-proc__idx button{all:unset;cursor:pointer;display:flex;gap:var(--s-3);align-items:baseline;padding:var(--s-2) 0;color:var(--ink-3);border-top:var(--bw) solid var(--line)}
.mx-proc__idx .n{font-family:var(--font-mono);font-size:var(--fs-caption)}
.mx-proc__idx button.on{color:var(--ink)}
.mx-proc__idx button.on .n{color:var(--acc)}
.mx-proc__steps{display:flex;flex-direction:column;gap:var(--s-7)}
.mx-step{scroll-margin-top:96px}
.mx-step .n{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--acc);letter-spacing:var(--tr-mono)}
.mx-step h3{font-size:var(--fs-h3);margin:var(--s-2) 0 var(--s-3)}
.mx-step p{color:var(--ink-2)}

/* ---------- comparativa (dos vias / dos opciones) ---------- */
.mx-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:740px){.mx-compare{grid-template-columns:1fr}}
.mx-compare__col{border:var(--bw) solid var(--line);border-radius:var(--r-2);padding:clamp(1.5rem,3vw,2.5rem)}
.mx-compare__n{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3)}
.mx-compare__t{font-size:var(--fs-h3);margin:var(--s-2) 0 var(--s-3)}
.mx-compare__sub{color:var(--acc);font-size:var(--fs-small);font-weight:600}
.mx-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.mx-list li{color:var(--ink-2);font-size:var(--fs-small);padding-left:var(--s-4);position:relative}
.mx-list li::before{content:"";position:absolute;left:0;top:0.6em;width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* ---------- callout / alerta (plazo, info, legal) ---------- */
.mx-callout{border:var(--bw) solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r-2);padding:clamp(1.5rem,3vw,2.5rem);background:var(--sup-0)}
.mx-callout--plazo{border-left-color:var(--plazo)}
.mx-callout--plazo .mx-callout__tag{color:var(--plazo)}
.mx-callout__tag{color:var(--acc);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase}
.mx-callout__t{font-size:var(--fs-h3);margin:var(--s-3) 0 var(--s-4);max-width:28ch}

/* ---------- resumen rapido / caja citable por IA (AI Overviews) ---------- */
.mx-tldr{background:var(--acc-soft);border-radius:var(--r-2);padding:clamp(1.25rem,3vw,2rem);border:var(--bw) solid transparent}
.mx-tldr__h{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--acc);margin-bottom:var(--s-3)}
.mx-tldr p,.mx-tldr li{font-size:var(--fs-small);color:var(--ink)}
.mx-tldr ul{margin:var(--s-2) 0 0 var(--s-4)}

/* ---------- ficha de caso anonimizado ---------- */
.mx-caso{border:var(--bw) solid var(--line);border-radius:var(--r-2);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);background:var(--sup-0)}
.mx-caso__k{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);display:flex;justify-content:space-between}
.mx-caso__t{font-size:var(--fs-h4);color:var(--ink)}
.mx-caso__via{color:var(--acc);font-size:var(--fs-caption);font-weight:600}
.mx-caso__res{color:var(--ink-2);font-size:var(--fs-small);margin-top:auto}

/* ---------- testimonio ---------- */
.mx-quote{border-top:2px solid var(--ink);padding-top:var(--s-5);max-width:60ch}
.mx-quote blockquote{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:var(--tr-tight);color:var(--ink);margin:0}
.mx-quote__by{margin-top:var(--s-4);font-size:var(--fs-caption);color:var(--ink-3);font-family:var(--font-mono)}

/* ---------- bio abogado + colegiacion ---------- */
.mx-bio{display:grid;grid-template-columns:0.7fr 1.3fr;gap:var(--s-6);align-items:center}
@media(max-width:740px){.mx-bio{grid-template-columns:1fr}}
.mx-bio__t{font-size:var(--fs-h2);max-width:16ch}
.mx-bio__cole{margin-top:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3)}

/* ---------- banda CTA ---------- */
.mx-ctaband{background:var(--sup-1);border-radius:var(--r-3);padding:clamp(2rem,5vw,4rem);text-align:center}
.mx-ctaband--dark{background:var(--sup-inv);color:var(--ink-inv)}
.mx-ctaband--dark .mx-ctaband__t{color:var(--ink-inv)}
.mx-ctaband--dark .mx-ctaband__p{color:var(--ink-inv-2)}
.mx-ctaband__t{font-size:var(--fs-h1);max-width:20ch;margin-inline:auto}
.mx-ctaband__p{color:var(--ink-2);max-width:48ch;margin:var(--s-4) auto 0}
.mx-ctaband__cta{display:flex;gap:var(--s-3);justify-content:center;margin-top:var(--s-6);flex-wrap:wrap}

/* ---------- FAQ acordeon (schema FAQPage) ---------- */
.mx-faq{border-top:var(--bw) solid var(--line)}
.mx-faq__item{border-bottom:var(--bw) solid var(--line)}
.mx-faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:var(--s-5) 0;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--ink)}
.mx-faq__q .mx-plus{flex:none;width:22px;height:22px;position:relative}
.mx-faq__q .mx-plus::before,.mx-faq__q .mx-plus::after{content:"";position:absolute;background:var(--acc);top:50%;left:0;width:100%;height:2px;transform:translateY(-50%);transition:transform var(--dur-2) var(--ease-out)}
.mx-faq__q .mx-plus::after{transform:translateY(-50%) rotate(90deg)}
.mx-faq__item.open .mx-plus::after{transform:translateY(-50%) rotate(0)}
.mx-faq__a{overflow:hidden;max-height:0;transition:max-height var(--dur-3) var(--ease-inout)}
.mx-faq__a p{padding-bottom:var(--s-5);color:var(--ink-2);max-width:70ch}

/* ---------- cita de sentencia / ley ---------- */
.mx-legalquote{border-left:3px solid var(--acc);padding:var(--s-2) 0 var(--s-2) var(--s-5);max-width:66ch}
.mx-legalquote p{font-family:var(--font-text);font-size:var(--fs-body);color:var(--ink);font-style:italic}
.mx-legalquote cite{display:block;margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);font-style:normal}

/* ---------- disclaimer / aviso legal ---------- */
.mx-disclaimer{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);border:var(--bw) dashed var(--line-2);border-radius:var(--r-1);padding:var(--s-4);max-width:80ch}

/* ---------- tarjeta de articulo / blog ---------- */
.mx-post{border-top:var(--bw) solid var(--ink);padding-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none}
.mx-post__date{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3)}
.mx-post__t{font-size:var(--fs-h4);line-height:var(--lh-head);color:var(--ink)}
.mx-post:hover .mx-post__t{color:var(--acc)}
.mx-post__cat{font-size:var(--fs-caption);color:var(--ink-3)}

/* ---------- articulo largo + indice lateral ---------- */
.mx-article{display:grid;grid-template-columns:0.28fr 0.72fr;gap:var(--s-8)}
@media(max-width:900px){.mx-article{grid-template-columns:1fr;gap:var(--s-6)}}
.mx-toc{position:sticky;top:88px;align-self:start;font-size:var(--fs-small)}
@media(max-width:900px){.mx-toc{position:static;border:var(--bw) solid var(--line);border-radius:var(--r-2);padding:var(--s-4)}}
.mx-toc__h{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3)}
.mx-toc a{display:block;padding:var(--s-2) 0;color:var(--ink-2);text-decoration:none;border-left:2px solid var(--line);padding-left:var(--s-3)}
.mx-toc a.on{color:var(--ink);border-left-color:var(--acc)}
.mx-prose{max-width:var(--measure)}
.mx-prose>*+*{margin-top:var(--s-5)}
.mx-prose h2{font-size:var(--fs-h2);margin-top:var(--s-8)}
.mx-prose h3{font-size:var(--fs-h3);margin-top:var(--s-6)}
.mx-prose p,.mx-prose li{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.mx-prose a{color:var(--acc)}
.mx-prose ul,.mx-prose ol{padding-left:var(--s-5)}
.mx-prose li{margin-top:var(--s-2)}

/* ---------- tabla ---------- */
.mx-tablewrap{overflow-x:auto}
.mx-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.mx-table th,.mx-table td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:var(--bw) solid var(--line)}
.mx-table th{font-family:var(--font-mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--tr-mono);color:var(--ink-3)}

/* ---------- imagenes: figura + tratamientos ----------
   Sin fotografia todavia. Tratamiento documental, NO stock sanitario.
   Duotono en verde Constante + Eclipse; grano; barras de redaccion
   para la estetica de expediente. Reservar aspect-ratio (CLS 0). */
.mx-figure{position:relative;overflow:hidden;border-radius:var(--r-2);background:var(--sup-2);margin:0}
.mx-figure img{width:100%;height:100%;object-fit:cover;display:block}
.mx-figure--16x9{aspect-ratio:16/9}
.mx-figure--4x5{aspect-ratio:4/5}
.mx-figure--3x2{aspect-ratio:3/2}
.mx-figure--1x1{aspect-ratio:1/1}
/* duotono: gris de base + acento por multiply y luz por screen */
.mx-figure--duo img{filter:grayscale(1) contrast(1.05)}
.mx-figure--duo::after{content:"";position:absolute;inset:0;background:var(--acc);mix-blend-mode:multiply;opacity:.62}
.mx-figure--duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--sup-0);mix-blend-mode:screen;opacity:.12}
/* grano sutil */
.mx-figure--grain .mx-grain{position:absolute;inset:0;z-index:2;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* etiqueta de expediente (mono, esquina) */
.mx-figure__label{position:absolute;top:var(--s-3);left:var(--s-3);z-index:3;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-mono);color:var(--ink-inv);background:color-mix(in srgb,var(--sup-inv) 70%,transparent);padding:0.2rem 0.5rem;border-radius:var(--r-1)}
/* barra de redaccion (expediente) */
.mx-redact{display:inline-block;background:var(--ink);color:transparent;border-radius:2px;padding:0 0.2em;user-select:none}
/* pie de figura */
.mx-figcap{margin-top:var(--s-2);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3)}
/* nota de placeholder sobre una figura ya tratada (mientras no hay foto real) */
.mx-figure__ph{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:var(--s-5)}
.mx-figure__ph span{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-mono);color:var(--ink-inv);background:color-mix(in srgb,var(--sup-inv) 55%,transparent);padding:0.4rem 0.8rem;border-radius:var(--r-1)}
/* placeholder cuando aun no hay imagen: dice que foto va y con que tratamiento */
.mx-figure.is-empty{display:grid;place-items:center;border:var(--bw) dashed var(--line-2);background:var(--sup-1)}
.mx-figure.is-empty .mx-figure__note{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);text-align:center;padding:var(--s-5);max-width:36ch}

/* ---------- formulario / campos (valoracion multi-paso) ---------- */
.mx-field{display:flex;flex-direction:column;gap:var(--s-2)}
.mx-label{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.mx-input,.mx-textarea,.mx-select{width:100%;font-family:var(--font-text);font-size:var(--fs-body);color:var(--ink);background:var(--sup-0);border:var(--bw) solid var(--line-2);border-radius:var(--r-2);padding:0.85rem 1rem;min-height:48px;transition:border-color var(--dur-1)}
.mx-input:focus,.mx-textarea:focus,.mx-select:focus{border-color:var(--acc);outline:var(--focus-w) solid var(--focus-color);outline-offset:1px}
.mx-input.is-error,.mx-textarea.is-error{border-color:var(--error)}
.mx-help{font-size:var(--fs-caption);color:var(--ink-3)}
.mx-error{font-size:var(--fs-caption);color:var(--error)}
.mx-check{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--fs-small);color:var(--ink-2)}
.mx-check input{margin-top:0.2em;width:20px;height:20px;accent-color:var(--acc);flex:none}
/* opciones tipo tarjeta (elige tu situacion) */
.mx-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media(max-width:560px){.mx-choice{grid-template-columns:1fr}}
.mx-choice label{border:var(--bw) solid var(--line-2);border-radius:var(--r-2);padding:var(--s-4);cursor:pointer;font-size:var(--fs-small);color:var(--ink);transition:border-color var(--dur-1),background var(--dur-1)}
.mx-choice input{position:absolute;opacity:0}
.mx-choice input:checked+span{font-weight:600}
.mx-choice label:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
/* barra de progreso del formulario */
.mx-steps{display:flex;gap:var(--s-2);margin-bottom:var(--s-5)}
.mx-steps span{flex:1;height:4px;border-radius:var(--r-pill);background:var(--line)}
.mx-steps span.on{background:var(--acc)}

/* ---------- paginacion ---------- */
.mx-pager{display:flex;gap:var(--s-2);justify-content:center;align-items:center}
.mx-pager a,.mx-pager span{min-width:44px;min-height:44px;display:grid;place-items:center;border:var(--bw) solid var(--line);border-radius:var(--r-1);font-size:var(--fs-small);color:var(--ink-2);text-decoration:none}
.mx-pager a:hover{border-color:var(--ink);color:var(--ink)}
.mx-pager .on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}

/* ---------- footer ---------- */
.mx-foot{background:var(--sup-inv);color:var(--ink-inv);padding-block:var(--s-8) var(--s-6)}
.mx-foot a{color:var(--ink-inv-2);text-decoration:none}
.mx-foot a:hover{color:var(--ink-inv)}
.mx-foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-6)}
@media(max-width:820px){.mx-foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mx-foot__top{grid-template-columns:1fr}}
.mx-foot h4{color:var(--ink-inv);font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:var(--tr-eyebrow);margin-bottom:var(--s-4)}
.mx-foot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s-3);font-size:var(--fs-small)}
.mx-foot__bar{border-top:var(--bw) solid var(--line-inv);margin-top:var(--s-8);padding-top:var(--s-5);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;color:var(--ink-inv-2);font-size:var(--fs-caption)}

/* ---------- barra CTA movil (solo en movil) ---------- */
.mx-mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:var(--s-2);padding:var(--s-3);background:color-mix(in srgb,var(--sup-0) 92%,transparent);backdrop-filter:blur(10px);border-top:var(--bw) solid var(--line)}
.mx-mcta .mx-btn{flex:1;justify-content:center}
@media(max-width:860px){.mx-mcta{display:flex}}

/* ---------- cookies ---------- */
.mx-cookies{background:var(--sup-inv);color:var(--ink-inv);border-radius:var(--r-2);padding:var(--s-5);box-shadow:var(--shadow-2);max-width:440px}
.mx-cookies p{font-size:var(--fs-small);color:var(--ink-inv-2)}
.mx-cookies a{color:var(--ink-inv);text-decoration:underline}
.mx-cookies__row{display:flex;gap:var(--s-2);margin-top:var(--s-4)}

/* ============================================================
   MODULOS DE IMPACTO (romper patron, mas oscuro, mas movimiento)
   ============================================================ */

/* ---------- statement / manifiesto oscuro a sangre ---------- */
.mx-statement{background:var(--sup-inv);color:var(--ink-inv)}
.mx-statement__t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-head);letter-spacing:var(--tr-tight);color:var(--ink-inv);max-width:20ch;margin:0}
.mx-statement__t em{font-style:normal;color:var(--acc-inv)}
.mx-statement__p{color:var(--ink-inv-2);max-width:54ch;margin-top:var(--s-6);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.mx-statement__note{margin-top:var(--s-6);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--acc-inv);letter-spacing:var(--tr-mono)}

/* ---------- banda de autoridad oscura (cualitativa, index) ---------- */
.mx-band{background:var(--sup-inv);color:var(--ink-inv)}
.mx-band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
@media(max-width:820px){.mx-band__grid{grid-template-columns:1fr;gap:var(--s-5)}}
.mx-band__item{border-top:var(--bw) solid var(--line-inv);padding-top:var(--s-4)}
.mx-band__k{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--acc-inv);letter-spacing:var(--tr-mono)}
.mx-band__v{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);color:var(--ink-inv);margin-top:var(--s-3);line-height:var(--lh-tight);letter-spacing:var(--tr-tight)}
.mx-band__d{color:var(--ink-inv-2);font-size:var(--fs-small);margin-top:var(--s-3)}

/* ---------- scroll pegajoso a dos columnas ---------- */
.mx-sticky{display:grid;grid-template-columns:0.46fr 0.54fr;gap:var(--s-8)}
@media(max-width:820px){.mx-sticky{grid-template-columns:1fr;gap:var(--s-6)}}
.mx-sticky__pin{position:sticky;top:96px;align-self:start;height:max-content}
@media(max-width:820px){.mx-sticky__pin{position:static}}
.mx-sticky__flow>*{min-height:44vh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--s-6);border-top:var(--bw) solid var(--line)}
.mx-sticky__flow>*:first-child{border-top:0;padding-top:0}
.mx-sticky__flow>*:last-child{min-height:auto}
@media(max-width:820px){.mx-sticky__flow>*{min-height:0;padding-top:var(--s-5)}}

/* ---------- split alternante imagen/texto ---------- */
.mx-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.mx-split--rev .mx-split__media{order:2}
@media(max-width:820px){.mx-split{grid-template-columns:1fr;gap:var(--s-5)}.mx-split--rev .mx-split__media{order:0}}

/* ---------- pull quote gigante ---------- */
.mx-pull{max-width:26ch}
.mx-pull blockquote{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-head);letter-spacing:var(--tr-tight);margin:0;color:var(--ink)}
.mx-pull blockquote em{font-style:normal;color:var(--acc)}
.mx-pull__by{margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3)}
/* cita + imagen documental (dos columnas, equilibra la seccion) */
.mx-quotefig{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--s-8);align-items:center}
.mx-quotefig .mx-pull{max-width:none}
.mx-quotefig .mx-pull blockquote{font-size:clamp(1.75rem,3.2vw,2.75rem)}
.mx-quotefig--rev .mx-quotefig__media{order:-1}
@media(max-width:820px){.mx-quotefig{grid-template-columns:1fr;gap:var(--s-6)}.mx-quotefig--rev .mx-quotefig__media{order:0}}

/* ---------- scroller horizontal con snap ---------- */
.mx-scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,320px);gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-4);scrollbar-width:thin}
.mx-scroller>*{scroll-snap-align:start}

/* ---------- timeline vertical numerada (guino cronologia clinica) ---------- */
.mx-timeline{display:flex;flex-direction:column}
.mx-timeline__it{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);padding-bottom:var(--s-7);position:relative}
.mx-timeline__n{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--acc);width:3ch}
.mx-timeline__it::before{content:"";position:absolute;left:1.5ch;top:1.4em;bottom:0;width:1px;background:var(--line-2)}
.mx-timeline__it:last-child::before{display:none}
.mx-timeline__dot{position:absolute;left:calc(1.5ch - 3px);top:0.5em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.mx-timeline__t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);color:var(--ink)}
.mx-timeline__d{color:var(--ink-2);font-size:var(--fs-small);margin-top:var(--s-2)}

/* ---------- index grande numerado (01 · Tipo) ---------- */
.mx-index{border-top:var(--bw) solid var(--line)}
.mx-index__it{display:flex;align-items:center;gap:var(--s-5);padding:clamp(1rem,2.5vw,1.75rem) 0;border-bottom:var(--bw) solid var(--line);text-decoration:none;transition:padding-left var(--dur-2) var(--ease-out)}
.mx-index__it:hover{padding-left:var(--s-4)}
.mx-index__n{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);width:3ch;flex:none;align-self:baseline;padding-top:0.4em}
.mx-index__t{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:var(--tr-tight);color:var(--ink);line-height:1.08}
.mx-index__d{display:block;color:var(--ink-3);font-size:var(--fs-small);margin-top:var(--s-2)}
.mx-index__it:hover .mx-index__t{color:var(--acc)}
.mx-index__go{margin-left:auto;color:var(--ink-3);align-self:center;font-size:var(--fs-h4)}
.mx-index__it:hover .mx-index__go{color:var(--acc);transform:translateX(4px)}
.mx-index__go{transition:transform var(--dur-2) var(--ease-out),color var(--dur-2)}

/* ---------- utilidades de movimiento (reutilizables) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
.js [data-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(2){transition-delay:70ms}
[data-stagger].is-in>*:nth-child(3){transition-delay:140ms}
[data-stagger].is-in>*:nth-child(4){transition-delay:210ms}
.mx-rvm{display:block;overflow:hidden;padding-bottom:0.08em}
.mx-rvm>i{display:block;font-style:normal;transition:transform var(--dur-3) var(--ease-inout)}
.js .mx-rvm>i{transform:translateY(112%)}
.mx-rvm.is-in>i,.is-in .mx-rvm>i{transform:none}
/* parallax por scroll, solo donde el navegador lo soporta (progresivo) */
@supports (animation-timeline: view()){
  .mx-parallax{will-change:transform;animation:mx-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes mx-par{from{transform:translateY(3%)}to{transform:translateY(-3%)}}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal],[data-stagger]>*{opacity:1 !important;transform:none !important}
  .mx-rvm>i{transform:none !important}
  .mx-marq__track,.mx-parallax{animation:none !important;transform:none !important}
}