/* Hallmark · genre: editorial · macrostructure: Manifesto v5 (lectura en 3 niveles: situación → declaración → servicio → detalle) · theme: marca El Intérprete (bloqueada por el usuario)
 * tone: cálido-editorial, más audaz · audience: negocios locales y pymes que crecieron · action: pedir la auditoría gratis
 * enrichment: Tier A (una ilustración CSS por pilar) · nav: sitio existente · footer: sitio existente
 * brand kit original conservado: tarjetas borde 2px + sombra dura, franjas tinta/crema alternadas, píldoras doradas,
 * numerales dorados, banda dorada de cierre, Fraunces + Manrope.
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 * contrast: pass (40–41) · nav: sitio · footer: sitio · slop: pass (42–45) · honest: pass (46: se quitó "ausentismo a cero" y "Cero Cancelaciones")
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30)
 * excepciones de marca pedidas por el usuario: 3 píldoras-etiqueta de marca (54), banda dorada de cierre (23)
 * tokens: tokens-paginas.css
 */

.mf { font-family: var(--font-body); color: var(--color-ink); }
.mf *, .mf *::before, .mf *::after { box-sizing: border-box; }
:where(.mf) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.mf) :where(ul, ol) { list-style: none; padding: 0; }
:where(.mf) a { color: inherit; text-decoration: none; }
.mf h1, .mf h2, .mf h3 { font-family: var(--font-display); font-weight: 900; font-style: normal; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.mf-wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--space-gutter); }

/* ---------- componentes de marca ---------------------------------------- */
.mf-pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-ink); font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px var(--color-shadow); transition: transform var(--dur-micro) var(--ease-out); }
.mf-pill span { opacity: 0.5; }
.mf-pill:hover { transform: translateY(-2px); }
.mf-pill:active { transform: translateY(0); }
.mf-pill--ghost { background: transparent; color: var(--color-on-ink); border-color: color-mix(in oklch, var(--color-on-ink) 40%, transparent); box-shadow: none; }

.mf-pilltag { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.mf-pilltag--line { padding: 0; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--color-accent); }
.mf-pilltag--gold { background: var(--color-accent); color: var(--color-ink); }
.mf-pilltag--ink { background: var(--color-ink); color: var(--color-paper); }

.mf-btn { display: inline-flex; align-items: center; padding: var(--space-lg) var(--space-xl); border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-ink); font: 800 1rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px var(--color-shadow); transition: transform var(--dur-micro) var(--ease-out); }
.mf-btn:hover { transform: translateY(-2px); }
.mf-btn:active { transform: translateY(0); }

.mf a:focus-visible, .mf summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; transition: none; }
.mf-hero a:focus-visible, .mf-band--ink a:focus-visible, .mf-band--ink summary:focus-visible, .mf-method a:focus-visible { outline-color: var(--color-accent); }

.mf-link { display: inline-flex; align-items: center; font: 800 0.8125rem/1.2 var(--font-body); letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: opacity var(--dur-micro) var(--ease-out); }
.mf-link:hover { opacity: 0.7; }

.mf-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.mf-chips li { border: 1.5px solid var(--c-chip, var(--color-ink)); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.04em; color: var(--c-fg, var(--color-ink)); }

@keyframes mf-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.mf-rise { animation: mf-rise var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .mf-rise { animation: none; } .mf-pill, .mf-btn, .mf-link, .mf-back { transition: none; } }

/* ---------- hero --------------------------------------------------------- */
.mf-hero { background: var(--color-ink); color: var(--color-on-ink); padding-block: clamp(3.5rem, 7vw, 6.875rem) clamp(4.75rem, 10vw, 9rem); }
.mf-back { display: inline-flex; font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-ink-soft); white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.mf-back:hover { color: var(--color-on-ink); }
.mf-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; margin-top: var(--space-xl); }
.mf-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-on-ink); margin-top: var(--space-lg); max-width: 16ch; }
.mf-hl { color: var(--color-accent); text-shadow: 3px 4px 0 var(--color-shadow-lift); }
.mf-hero__text { font-size: var(--text-lg); line-height: 1.6; color: var(--color-on-ink-body); max-width: 46ch; }
.mf-ask { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mf-ask__title { font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-ink-soft); }
.mf-ask__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); margin-top: var(--space-md); }
.mf-ask__item { display: grid; gap: var(--space-sm); align-content: space-between; height: 100%; padding: var(--space-lg); background: var(--color-ink-card); border: 2px solid var(--color-ink-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); transition: transform var(--dur-micro) var(--ease-out); }
.mf-ask__item:hover { transform: translateY(-3px); }
.mf-ask__item:active { transform: translateY(0); }
.mf-ask__n { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--color-accent); }
.mf-ask__q { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.1; color: var(--color-on-ink); text-wrap: balance; }
.mf-ask__to { font: 700 0.6875rem/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-ink-soft); }
@media (min-width: 40rem) { .mf-ask__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mf-ask__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mf-ask__list li { grid-column: span 2; } .mf-ask__list li:nth-child(n+4) { grid-column: span 3; } }
.mf-hero__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1.5px solid var(--color-ink-line); }
.mf-hero__alt p { font: 600 1.0625rem/1.4 var(--font-body); color: var(--color-on-ink-body); max-width: 46ch; }
@media (min-width: 60rem) { .mf-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-2xl); } }

.mf-note { padding-block: var(--space-md); font-size: 0.875rem; line-height: 1.5; color: var(--color-muted); background: var(--color-paper); max-width: none; }

/* ---------- bandas de pilar: la declaración manda ------------------------- */
.mf-band { --c-fg: var(--color-ink); --c-chip: var(--color-ink); --c-muted: var(--color-muted); --card-bg: var(--color-paper-2); --card-border: var(--color-ink); --card-shadow: var(--shadow-hard-ink); --ill-shadow: var(--shadow-hard-ink);
  background: var(--color-paper); color: var(--c-fg); padding-block: var(--space-section); scroll-margin-top: var(--space-2xl); }
.mf-band--ink { --c-fg: var(--color-on-ink); --c-chip: var(--color-on-ink-soft); --c-muted: var(--color-on-ink-dim); --card-bg: var(--color-ink-card); --card-border: var(--color-ink-line); --card-shadow: var(--shadow-hard); --ill-shadow: var(--shadow-hard);
  background: var(--color-ink); }

.mf-head__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.mf-num { font-family: var(--font-display); font-weight: 900; font-size: var(--text-numeral); line-height: 0.8; letter-spacing: -0.03em; color: var(--color-accent); }
.mf-label { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); border: 1.5px solid var(--c-chip); border-radius: var(--radius-pill); font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.mf-statement { font-size: var(--text-statement); line-height: 0.98; letter-spacing: -0.02em; margin-top: var(--space-lg); max-width: 19ch; }
.mf-band--ink .mf-statement { color: var(--color-on-ink); }
.mf-mark { background: linear-gradient(180deg, transparent 56%, var(--color-accent) 56%, var(--color-accent) 92%, transparent 92%); }
.mf-band--ink .mf-mark { background: none; color: var(--color-accent); }

.mf-head__bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; margin-top: var(--space-xl); }
.mf-lead { font-size: var(--text-lg); line-height: 1.55; color: var(--c-muted); max-width: 48ch; }
.mf-head__bottom .mf-pill { margin-top: var(--space-lg); }

.mf-rows { display: grid; gap: var(--space-xl); margin-top: clamp(2.5rem, 5vw, 4rem); }
.mf-svc { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.mf-svc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg); cursor: pointer; list-style: none; }
.mf-svc summary::-webkit-details-marker { display: none; }
.mf-svc__text { display: grid; gap: var(--space-xs); min-width: 0; }
.mf-svc h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em; }
.mf-band--ink .mf-svc h3 { color: var(--color-on-ink); }
.mf-svc__one { font-size: var(--text-base); line-height: 1.45; color: var(--c-muted); max-width: 60ch; }
.mf-svc__plus { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-accent); transition: transform var(--dur-micro) var(--ease-out); }
.mf-svc__plus::before, .mf-svc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.875rem; height: 2px; margin: -1px 0 0 -0.4375rem; background: var(--color-ink); transition: transform var(--dur-micro) var(--ease-out); }
.mf-svc__plus::after { transform: rotate(90deg); }
.mf-svc[open] .mf-svc__plus::after { transform: rotate(0); }
.mf-svc summary:hover .mf-svc__plus { transform: scale(1.08); }
.mf-svc__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: 0 var(--space-lg) var(--space-lg); margin-top: calc(var(--space-xs) * -1); }
.mf-svc__main { display: grid; gap: var(--space-md); justify-items: start; padding-top: var(--space-lg); border-top: 1.5px solid var(--c-line, var(--color-rule)); }
.mf-svc__main p { font-size: var(--text-base); line-height: 1.6; color: var(--c-muted); max-width: 56ch; }
.mf-band--ink { --c-line: var(--color-ink-line); }
.mf-band--ink .mf-link { color: var(--color-on-ink-body); }

.mf-case { align-self: start; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); border-left: 4px solid var(--color-accent); }
.mf-case__label { display: block; font: 700 0.6875rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.mf-case p { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.5; color: var(--c-fg); margin-top: var(--space-sm); max-width: 44ch; }

@media (min-width: 48rem) {
  .mf-svc__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
  .mf-svc__main { padding-top: var(--space-lg); }
  .mf-case { margin-top: var(--space-lg); }
}
@media (min-width: 60rem) {
  .mf-head__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-2xl); }
  .mf-svc summary { padding: var(--space-xl); }
  .mf-svc__body { padding: 0 var(--space-xl) var(--space-xl); }
}

/* ---------- ilustraciones en CSS (una por pilar, sin cifras) ------------- */
.mf-skel { display: block; height: 0.45rem; border-radius: var(--radius-pill); background: var(--color-rule); }
.mf-skel--m { width: 70%; }
.mf-skel--title { width: 45%; height: 0.6rem; background: var(--color-ink); margin-bottom: var(--space-2xs); }
.mf-dot { flex: none; position: relative; width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 1.5px solid var(--color-ink); }
.mf-dot--ok { background: var(--color-ink); }
.mf-dot--ok::after { content: ""; position: absolute; left: 0.2rem; top: 0.04rem; width: 0.22rem; height: 0.4rem; border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mf-dot--warn { background: var(--color-accent); }

.mf-report, .mf-review { display: grid; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-ink); border: 2px solid var(--color-ink); border-radius: var(--radius-lg); box-shadow: var(--ill-shadow); }
.mf-report p { display: flex; align-items: center; gap: var(--space-xs); font: 700 0.8125rem/1 var(--font-body); }
.mf-stars { display: flex; gap: var(--space-2xs); }
.mf-stars i { width: 1.125rem; height: 1.125rem; background: var(--color-accent); clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%); }
.mf-reply { justify-self: start; margin-top: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); font: 700 0.625rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }

.mf-ill--same { display: flex; align-items: center; gap: var(--space-2xs); }
.mf-same { flex: 1 1 0; min-width: 0; display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); background: var(--color-paper-2); color: var(--color-ink); border: 2px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--ill-shadow); }
.mf-same span { font: 800 0.6875rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.mf-same i { display: block; height: 0.45rem; border-radius: var(--radius-pill); background: var(--color-ink); }
.mf-same i.s { width: 60%; background: var(--color-accent); }
.mf-ill--same b { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-accent); color: var(--color-ink); font: 800 0.875rem/1 var(--font-body); }

.mf-ill--chat { display: grid; gap: var(--space-sm); }
.mf-bubble { justify-self: start; max-width: 85%; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); color: var(--color-ink); border-radius: 1rem 1rem 1rem 0.25rem; font: 600 0.875rem/1.35 var(--font-body); }
.mf-bubble--agent { justify-self: end; background: var(--color-accent); border-radius: 1rem 1rem 0.25rem 1rem; }
.mf-task { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); font: 800 0.6875rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-ink-body); }
.mf-task .mf-dot { border-color: var(--color-accent); background: var(--color-accent); }
.mf-task .mf-dot::after { border-color: var(--color-ink); }

.mf-ill--flow { display: flex; align-items: center; gap: var(--space-sm); }
.mf-sheet, .mf-panel { flex: 1 1 0; min-width: 0; max-width: 11rem; height: 8.5rem; background: var(--color-paper-2); border: 2px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--ill-shadow); }
.mf-sheet { position: relative; transform: rotate(-3deg); overflow: hidden; background-image: linear-gradient(var(--color-rule) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--color-rule) 1.5px, transparent 1.5px); background-size: 100% 1.7rem, 2.75rem 100%; }
.mf-cell { position: absolute; display: flex; align-items: center; padding-inline: var(--space-xs); height: 1.7rem; border: 1.5px dashed var(--color-ink); border-radius: 0.2rem; background: var(--color-paper-2); font: 700 0.625rem/1 var(--font-body); color: var(--color-ink); white-space: nowrap; }
.mf-cell--a { left: 2.75rem; top: 1.7rem; width: 3rem; }
.mf-cell--b { left: var(--space-xs); top: 3.4rem; width: 7.5rem; }
.mf-arrow { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent); color: var(--color-ink); font: 800 0.9375rem/1 var(--font-body); }
.mf-panel { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-sm); }
.mf-bars { display: flex; align-items: flex-end; gap: var(--space-2xs); height: 3.5rem; margin-top: var(--space-2xs); }
.mf-bars i { flex: 1; height: var(--h); background: var(--color-ink); border-radius: 2px 2px 0 0; }
.mf-bars i.is-gold { background: var(--color-accent); }

/* ---------- método ------------------------------------------------------- */
.mf-method { background: var(--color-ink); color: var(--color-on-ink); padding-block: clamp(3.5rem, 6vw, 6rem); border-top: 2px solid var(--color-ink); }
.mf-method h2 { font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1; letter-spacing: -0.015em; color: var(--color-on-ink); margin: var(--space-lg) 0 clamp(2.25rem, 4vw, 3.5rem); max-width: 20ch; }
.mf-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.mf-steps li { padding: var(--space-lg); border: 2px solid var(--color-ink-line); border-radius: var(--radius-lg); background: var(--color-ink-card); }
.mf-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: var(--color-accent); color: var(--color-ink); font: 800 0.9375rem/1 var(--font-body); }
.mf-steps h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.05; color: var(--color-on-ink); margin-top: var(--space-md); }
.mf-steps p { font-size: 0.96875rem; line-height: 1.55; color: var(--color-on-ink-dim); margin-top: var(--space-sm); }
.mf-steps .mf-steps__key { background: var(--color-accent); border-color: var(--color-accent); box-shadow: -6px 8px 0 var(--color-on-ink-soft); }
.mf-steps__key .mf-steps__n { background: var(--color-ink); color: var(--color-accent); }
.mf-steps__key h3, .mf-steps__key p { color: var(--color-ink); }
@media (min-width: 40rem) and (max-width: 59.99rem) { .mf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .mf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } }

/* ---------- cierre dorado ------------------------------------------------ */
.mf-close { background: var(--color-accent); padding-block: clamp(3.5rem, 6vw, 6rem); border-top: 2px solid var(--color-ink); }
.mf-close__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.mf-close h2 { font-size: clamp(2.25rem, 5vw, 4.625rem); line-height: 0.96; letter-spacing: -0.015em; color: var(--color-ink); margin-top: var(--space-lg); max-width: 14ch; }
.mf-close .mf-btn { justify-self: start; background: var(--color-ink); color: var(--color-accent); }
.mf-close--mid { padding-block: clamp(2.5rem, 4vw, 4rem); }
.mf-close--mid h2 { font-size: clamp(1.75rem, 3.4vw, 3rem); margin-top: 0; max-width: 22ch; }
@media (min-width: 60rem) { .mf-close__grid { grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-2xl); } .mf-close .mf-btn { justify-self: end; } }

/* ---------- móvil -------------------------------------------------------- */
@media (max-width: 30rem) {
  .mf-pill { padding: var(--space-sm) var(--space-md); font-size: 0.6875rem; letter-spacing: 0.06em; }
  .mf-btn { padding-inline: var(--space-lg); font-size: 0.875rem; }
  .mf-label { font-size: 0.6875rem; letter-spacing: 0.08em; }
}
/* bloque "por rubro" (enlaza a /para/…) */
#por-rubro h2 { margin-top: var(--space-md); }
.mf-rubro__text { margin: var(--space-md) 0 0; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); max-width: 52ch; }