/* ═══════════════════════════════════════════════════════════════════════════
   MAGIC DESIGN EFECTO · Sistema de diseño v2
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de output.css. Todo lo nuevo vive aquí y usa tokens; no
   hay un solo color suelto repartido por el marcado.

   Convención de temas
   -------------------
   :root                      → tema oscuro (el de la marca, el que ve quien
                                no ha elegido nada y su sistema está en oscuro)
   :root[data-theme="light"]  → claro, elegido a mano
   @media (prefers-color-scheme: light) :root:not([data-theme="dark"])
                              → claro, heredado del sistema

   El <script> del <head> escribe data-theme antes del primer pintado, así que
   no hay parpadeo al recargar con el tema claro guardado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root {
    /* Superficies */
    --bg: #0a0e17;
    --bg-alt: #0d121d;
    --surface: #121826;
    --surface-2: #171e2e;
    --surface-hover: #1a2233;

    /* Líneas: una fina para separar, una marcada para contener */
    --line: #1e2636;
    --line-2: #2b3548;

    /* Tinta. Los ratios se miden contra el fondo MÁS CLARO en el que cae cada
       tono, no contra --bg: medirlo sólo sobre --bg dejaba pasar un ink-3 que
       cumplía ahí (4.7:1) y se quedaba en 4.3:1 sobre --surface, que es donde
       vive la nota del formulario. Peor caso, sobre --surface-2:
       ink-2 = 7.4:1, ink-3 = 4.6:1. */
    --ink: #eef2f8;
    --ink-2: #a3aec0;
    --ink-3: #7c889c;

    /* Acento único. 7.1:1 sobre --bg */
    --accent: #7d97fb;
    --accent-hover: #9ab0ff;
    --accent-ink: #060a13;
    --accent-soft: rgba(125, 151, 251, .12);
    --accent-line: rgba(125, 151, 251, .32);

    /* Señales */
    --ok: #34d399;
    --warn: #fbbf24;
    --bad: #f87171;

    /* Profundidad: desplazamiento + desenfoque, nunca un halo centrado */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 12px 28px -12px rgba(0, 0, 0, .7);
    --shadow-3: 0 24px 56px -20px rgba(0, 0, 0, .8);
    /* Realce de las cifras de resultados. Sobre fondo oscuro un halo muy
       abierto hace que el dato parezca emitir luz; en claro se apaga, porque
       ahi el mismo efecto solo ensucia el texto. */
    --glow-rule: 0 0 12px rgba(125, 151, 251, .55);
    --glow-value: 0 0 40px rgba(238, 242, 248, .16);

    /* Tipografías */
    --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Ritmo. El clamp pone el techo: las secciones no pueden crecer más de
       96 px arriba y abajo por mucho que crezca la pantalla. */
    --maxw: 1200px;
    --pad-x: clamp(1.25rem, 4vw, 2rem);
    --sec-y: clamp(3.5rem, 6.5vw, 6rem);
    --sec-y-sm: clamp(2.5rem, 4.5vw, 4rem);
    --gap: clamp(1rem, 2.4vw, 1.75rem);

    /* Alto de la barra fija. Lo usan `.mde-nav__inner` y el
       `scroll-padding-top` del documento, que antes llevaban valores sueltos:
       la barra medía 4rem en móvil y 4.5rem en escritorio, pero el ancla
       reservaba 5.5rem fijos en los dos, así que al saltar a una sección
       sobraban 23 px en móvil y 15 px en escritorio. */
    --nav-h: 4rem;

    /* Radios */
    --r-sm: .5rem;
    --r-md: .75rem;
    --r-lg: 1rem;

    --ease: cubic-bezier(.16, .84, .44, 1);

    /* Puente hacia el bloque del formulario que ya vive en output.css */
    --mde-field: #0a0e17;
    --mde-line: #1e2636;
    --mde-line-strong: #2b3548;
    --mde-muted: #a3aec0;
    --mde-ok: #34d399;
    --mde-bad: #f87171;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg: #ffffff;
    --bg-alt: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --surface-hover: #edf1f8;

    --line: #e5e9f0;
    --line-2: #d3dae5;

    /* Mismo criterio que en oscuro: peor caso, sobre --surface-hover.
       ink-2 = 5.8:1, ink-3 = 4.6:1. Sobre blanco suben a 6.5 y 5.2. */
    --ink: #0b101b;
    --ink-2: #545e70;
    --ink-3: #636d7f;

    /* 6.8:1 sobre blanco, y blanco encima da los mismos 6.8:1 */
    --accent: #2348e0;
    --accent-hover: #1a37b8;
    --accent-ink: #ffffff;
    --accent-soft: rgba(35, 72, 224, .07);
    --accent-line: rgba(35, 72, 224, .24);

    --ok: #0f8a5f;
    --warn: #a16207;
    --bad: #c0392f;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-2: 0 12px 28px -14px rgba(16, 24, 40, .22);
    --shadow-3: 0 24px 56px -24px rgba(16, 24, 40, .26);
    --glow-rule: none;
    --glow-value: none;

    --mde-field: #ffffff;
    --mde-line: #e5e9f0;
    --mde-line-strong: #d3dae5;
    --mde-muted: #545e70;
    --mde-ok: #0f8a5f;
    --mde-bad: #c0392f;

    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #ffffff;
        --bg-alt: #f6f8fc;
        --surface: #ffffff;
        --surface-2: #f6f8fc;
        --surface-hover: #edf1f8;
        --line: #e5e9f0;
        --line-2: #d3dae5;
        --ink: #0b101b;
        --ink-2: #545e70;
        --ink-3: #636d7f;
        --accent: #2348e0;
        --accent-hover: #1a37b8;
        --accent-ink: #ffffff;
        --accent-soft: rgba(35, 72, 224, .07);
        --accent-line: rgba(35, 72, 224, .24);
        --ok: #0f8a5f;
        --warn: #a16207;
        --bad: #c0392f;
        --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
        --shadow-2: 0 12px 28px -14px rgba(16, 24, 40, .22);
        --shadow-3: 0 24px 56px -24px rgba(16, 24, 40, .26);
    --glow-rule: none;
    --glow-value: none;
        --mde-field: #ffffff;
        --mde-line: #e5e9f0;
        --mde-line-strong: #d3dae5;
        --mde-muted: #545e70;
        --mde-ok: #0f8a5f;
        --mde-bad: #c0392f;
        color-scheme: light;
    }
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */

body.mde {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* `clip` recorta igual que `hidden` pero NO convierte al body en contenedor de
   scroll, que es lo que dejaría a la barra `sticky` pegada a un contenedor que
   nunca hace scroll. `hidden` queda de respaldo para navegadores sin `clip`. */
@supports (overflow-x: clip) {
    body.mde { overflow-x: clip; }
}

/* ── Iconos de marca ──────────────────────────────────────────────────────
   WhatsApp, Telegram y los sociales iban con Font Awesome: tres peticiones a
   cdnjs y un woff2 de ~110 KB con más de 400 glifos para usar doce. Ahora van
   embebidos como SVG, igual que ya se hizo con los de Lucide.

   Se comportan como el icono de fuente que sustituyen -- un cuadrado de 1em
   que hereda el color -- así que cada contexto los sigue dimensionando con su
   `font-size`, sin tocar un solo contenedor. Donde ya había una regla para
   `svg` (.mde-cta, .mde-nav__cta, .mde-grid__icon) esa gana por especificidad
   y manda ella, que es lo que queremos.

   El -.125em es el mismo que aplica Font Awesome: asienta el icono sobre la
   línea base del texto en vez de dejarlo colgando. */
.mde-ico {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -.125em;
    flex-shrink: 0;
}

body.mde ::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

/* :where() deja la especificidad en cero: si no, este `height:auto` ganaba a
   `.mde-nav__brand img{height:1.75rem}` y el logo salía al doble de tamaño. */
body.mde :where(img) {
    max-width: 100%;
    height: auto;
}

body.mde :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Ancla bajo la barra fija */
html {
    /* El alto real de la barra más un dedo de aire, para que el título de la
       sección no quede pegado al borde inferior de la barra. */
    scroll-padding-top: calc(var(--nav-h) + 1rem);
}

/* Salto al contenido: invisible hasta que llega el foco por teclado */
.mde-skip {
    position: fixed;
    top: .75rem;
    left: 50%;
    transform: translate(-50%, -200%);
    z-index: 80;
    padding: .625rem 1rem;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s var(--ease);
}

.mde-skip:focus-visible {
    transform: translate(-50%, 0);
}

/* ── 3. LAYOUT ─────────────────────────────────────────────────────────── */

.mde-shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.mde-sec {
    padding-block: var(--sec-y);
    position: relative;
}

.mde-sec--sm {
    padding-block: var(--sec-y-sm);
}

.mde-sec--alt {
    background: var(--bg-alt);
}

.mde-sec--line {
    border-top: 1px solid var(--line);
}

/* Cabecera de sección. Más aire encima del título que debajo. */
.mde-head {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mde-head--center {
    margin-inline: auto;
    text-align: center;
}

/* ── 4. TIPOGRAFÍA ─────────────────────────────────────────────────────── */

.mde-h1,
.mde-h2,
.mde-h3,
.mde-h4 {
    font-family: var(--font-display);
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.mde-h1 {
    font-size: clamp(2.125rem, 5.2vw, 3.75rem);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 800;
}

.mde-h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 700;
}

.mde-h3 {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -.015em;
    font-weight: 700;
}

.mde-h4 {
    font-size: .9375rem;
    line-height: 1.35;
    letter-spacing: -.01em;
    font-weight: 700;
}

/* El acento va sólido. El degradado en texto es decoración, no jerarquía. */
.mde-accent {
    color: var(--accent);
}

.mde-lead {
    font-size: clamp(1rem, 1.35vw, 1.1875rem);
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    max-width: 42ch;
    text-wrap: pretty;
}

.mde-head--center .mde-lead {
    margin-inline: auto;
}

.mde-p {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
    max-width: 68ch;
    text-wrap: pretty;
}

.mde-p--sm {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ink-3);
}

/* Monoespaciada sólo donde hay dato, índice o medida. */
.mde-mono {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.mde-mono--accent {
    color: var(--accent);
}

/* Cintillo de sección: .mde-mono con el primer término en acento. Sólo añade
   lo que cambia; el resto ya lo pone .mde-mono. */
.mde-eyebrow b {
    font-weight: 500;
    color: var(--accent);
}

.mde-eyebrow + .mde-h2 {
    margin-top: .875rem;
}

.mde-stack > * + * {
    margin-top: 1rem;
}

.mde-stack--lg > * + * {
    margin-top: 1.5rem;
}

/* ── 5. BARRA SUPERIOR ─────────────────────────────────────────────────── */

/* `sticky`, no `fixed`. En Chromium móvil una barra `fixed` vive en una capa
   compuesta aparte que el navegador tiene que resincronizar cada vez que su UI
   (la barra de direcciones) se contrae o se expande: al tocar el final de la
   página desaparecía durante un instante y al volver a subir reaparecía a medio
   pintar. `sticky` viaja dentro del propio flujo de scroll y no tiene ese
   desfase. Como ahora ocupa su hueco, la compensación que llevaba `.mde-hero`
   en el padding superior se retiró.

   El fondo es opaco. El translúcido sólo se sostiene si hay desenfoque detrás,
   y el desenfoque está limitado a escritorio por coste: en móvil la barra
   translúcida y sin blur dejaba leer el texto de la página a través de ella. */
.mde-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(8px)) {
    @media (min-width: 1024px) {
        .mde-nav {
            background: color-mix(in srgb, var(--bg) 88%, transparent);
            backdrop-filter: saturate(140%) blur(10px);
        }
    }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mde-nav { background: var(--bg); }
}

.mde-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--nav-h);
}

@media (min-width: 1024px) {
    :root { --nav-h: 4.5rem; }
}

.mde-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    flex-shrink: 0;
}

.mde-nav__brand img {
    height: 1.75rem;
    width: auto;
}

.mde-nav__wordmark {
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    white-space: nowrap;
}

.mde-nav__wordmark b {
    font-weight: 700;
    color: var(--accent);
}

.mde-nav__links {
    display: none;
    align-items: center;
    gap: .25rem;
}

@media (min-width: 900px) {
    .mde-nav__links { display: flex; }
}

.mde-nav__link {
    position: relative;
    padding: .5rem .75rem;
    border-radius: var(--r-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .18s var(--ease), background-color .18s var(--ease);
}

@media (hover: hover) {
    .mde-nav__link:hover {
        color: var(--ink);
        background: var(--surface-2);
    }
}

.mde-nav__link[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.mde-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .125rem;
    height: 1.5px;
    border-radius: 2px;
    background: var(--accent);
}

.mde-nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Interruptor de tema */
.mde-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    padding: 0;
    transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

@media (hover: hover) {
    .mde-theme:hover {
        color: var(--ink);
        border-color: var(--accent-line);
        background: var(--surface-2);
    }
}

.mde-theme svg {
    width: 1rem;
    height: 1rem;
}

/* Sólo se ve el icono del tema al que se puede cambiar */
.mde-theme .mde-theme__moon { display: none; }
.mde-theme .mde-theme__sun { display: block; }

:root[data-theme="light"] .mde-theme .mde-theme__sun { display: none; }
:root[data-theme="light"] .mde-theme .mde-theme__moon { display: block; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mde-theme .mde-theme__sun { display: none; }
    :root:not([data-theme="dark"]) .mde-theme .mde-theme__moon { display: block; }
}

.mde-nav__cta {
    display: none;
}

@media (min-width: 900px) {
    .mde-nav__cta {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        height: 2.25rem;
        padding-inline: .9375rem;
        border-radius: 999px;
        border: 1px solid var(--line-2);
        font-size: .8125rem;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        white-space: nowrap;
        transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
    }

    @media (hover: hover) {
        .mde-nav__cta:hover {
            border-color: var(--accent-line);
            background: var(--accent-soft);
            color: var(--accent);
        }
    }

    .mde-nav__cta svg { width: .9375rem; height: .9375rem; }
}

/* ── 6. MENÚ MÓVIL (sólo CSS, funciona sin JS) ─────────────────────────── */

.mde-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    padding: 0;
}

@media (min-width: 900px) {
    .mde-burger { display: none; }
}

/* Área de toque de 44 px en pantallas táctiles, el mínimo que recomienda
   Apple. Las dos cajas miden 36 y son los únicos controles de la barra en
   móvil, pegados por un hueco de 8 px: tocar el tema queriendo abrir el menú
   era fácil.

   Se agranda con un pseudo-elemento en vez de subir width y height porque en
   una pantalla de 320 px la barra ya va justa -- logo, "MAGIC DESIGN EFECTO"
   sin partir, y las dos cajas -- y ocho píxeles más por control la
   desbordarían. Así el dibujo no se mueve un píxel y el dedo gana los ocho
   que le faltaban. El -4 por lado deja las dos áreas justo pegadas, sin
   solaparse, en el hueco de 8 que las separa. */
@media (pointer: coarse) {
    .mde-burger,
    .mde-theme { position: relative; }

    .mde-burger::after,
    .mde-theme::after {
        content: '';
        position: absolute;
        inset: -4px;
    }
}

.mde-burger__box {
    position: relative;
    width: 1rem;
    height: .625rem;
}

.mde-burger__box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .28s var(--ease), opacity .18s linear;
}

.mde-burger__box span:nth-child(1) { top: 0; }
.mde-burger__box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mde-burger__box span:nth-child(3) { bottom: 0; }

.mde-nav__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.mde-nav__toggle:focus-visible + .mde-burger {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.mde-nav__toggle:checked + .mde-burger .mde-burger__box span:nth-child(1) {
    transform: translateY(4.25px) rotate(45deg);
}

.mde-nav__toggle:checked + .mde-burger .mde-burger__box span:nth-child(2) {
    opacity: 0;
}

.mde-nav__toggle:checked + .mde-burger .mde-burger__box span:nth-child(3) {
    transform: translateY(-4.25px) rotate(-45deg);
}

/* Cuelga de la barra, no del viewport: `top: 100%` lo ancla al borde inferior
   de `.mde-nav` (que al ser sticky ya es contenedor de posicionamiento), así
   sigue a la barra sin tener que repetir su altura en un `inset`. */
.mde-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
    z-index: 55;
}

/* `visibility: hidden` es lo que saca los enlaces del orden de tabulación y
   del árbol de accesibilidad mientras el cajón está cerrado. Colapsar la fila
   a 0fr con `overflow: hidden` sólo los esconde a la vista: seguían ahí para
   el teclado, así que por debajo de 900 px se tabulaban dieciocho enlaces
   invisibles después del botón del menú.

   Se transiciona junto con la fila, y no hace falta retrasarla a mano:
   `visibility` interpola de forma especial -- vale `visible` durante toda la
   transición y sólo salta a `hidden` al terminar -- así que el contenido sigue
   viéndose mientras el cajón se pliega. Va en CSS y no en JS porque la
   apertura tampoco depende de JS. */
.mde-drawer__inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility .3s var(--ease);
}

.mde-nav__toggle:checked ~ .mde-drawer {
    grid-template-rows: 1fr;
}

.mde-nav__toggle:checked ~ .mde-drawer .mde-drawer__inner {
    visibility: visible;
}

@media (min-width: 900px) {
    .mde-drawer { display: none; }
}

.mde-drawer__list {
    display: flex;
    flex-direction: column;
    padding: .5rem var(--pad-x) 1.25rem;
    max-width: var(--maxw);
    margin-inline: auto;
}

.mde-drawer__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem .25rem;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}

.mde-drawer__link svg {
    width: 1rem;
    height: 1rem;
    color: var(--ink-3);
    flex-shrink: 0;
}

.mde-drawer__link[aria-current="page"] {
    color: var(--accent);
}

.mde-drawer__link[aria-current="page"] svg { color: var(--accent); }

.mde-drawer__social {
    display: flex;
    gap: .5rem;
    padding-top: 1rem;
}

/* ── 7. BOTONES DE PÁGINA ──────────────────────────────────────────────── */

.mde-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 3rem;
    padding-inline: 1.375rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

.mde-cta svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform .22s var(--ease);
}

.mde-cta--primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-1);
}

@media (hover: hover) {
    .mde-cta--primary:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-2);
    }
}

@media (hover: hover) {
    .mde-cta--primary:hover svg { transform: translateX(3px); }
}

.mde-cta--ghost {
    background: transparent;
    border-color: var(--line-2);
    color: var(--ink);
}

@media (hover: hover) {
    .mde-cta--ghost:hover {
        border-color: var(--accent-line);
        background: var(--accent-soft);
        color: var(--accent);
    }
}

/* Enlace con subrayado propio, para las salidas secundarias */
.mde-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: .25rem;
    border-bottom: 1.5px solid var(--accent);
    transition: color .18s var(--ease), gap .18s var(--ease);
}

.mde-link svg { width: 1rem; height: 1rem; }
@media (hover: hover) {
    .mde-link:hover { color: var(--accent); gap: .75rem; }
}

.mde-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (max-width: 419px) {
    .mde-btnrow { flex-direction: column; }
    .mde-btnrow .mde-cta { width: 100%; }

    /* Aquí el botón pasa a ancho completo y deja de medir lo que mide su
       contenido. "Conversemos por WhatsApp" pide 296 px entre icono, rótulo,
       flecha y relleno; dentro de la caja de llamada hay 222 a 320 px de
       pantalla. Con white-space:nowrap el rótulo no se partía: se comía el
       relleno lateral hasta tocar el borde.
       El alto pasa a mínimo en vez de fijo para que la segunda línea quepa;
       cuando el rótulo entra en una sola —de 375 px en adelante— el botón
       sigue midiendo los mismos 48 px de antes. */
    .mde-call .mde-cta {
        height: auto;
        min-height: 3rem;
        padding-block: .625rem;
        padding-inline: 1rem;
        white-space: normal;
        text-wrap: balance;
        line-height: 1.3;
    }
}

/* ── 8. PORTADA ────────────────────────────────────────────────────────── */

/* Sin el sumando de la altura de la barra: desde que `.mde-nav` es sticky
   ocupa su propio hueco en el flujo y ya no hay que dejarle sitio aquí. */
.mde-hero {
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: var(--sec-y-sm);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .mde-hero { padding-top: clamp(3rem, 6vw, 5.5rem); }
}

/* Elevación de luz detrás del titular, muy contenida */
.mde-hero::before {
    content: "";
    position: absolute;
    top: -18rem;
    left: 50%;
    width: min(60rem, 130%);
    height: 34rem;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, var(--accent-soft), transparent 68%);
    pointer-events: none;
}

.mde-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3125rem .75rem .3125rem .5625rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .06em;
    color: var(--ink-2);
}

.mde-pill b {
    font-weight: 500;
    color: var(--accent);
}

.mde-pill__dot {
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background: var(--accent);
    flex-shrink: 0;
}

.mde-hero__title {
    margin-top: 1.5rem;
    max-width: 20ch;
}

/* El acento arranca en línea propia: partido a media línea el color parecía
   un resalte suelto en vez del segundo tiempo del titular. */
.mde-hero__title .mde-accent {
    display: block;
}

.mde-hero__lead {
    margin-top: 1.5rem;
    max-width: 52ch;
}

.mde-hero__note {
    margin-top: .875rem;
    max-width: 56ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ink-3);
}

.mde-hero__actions {
    margin-top: 2rem;
}

/* Tira de datos con filetes: la firma de la retícula */
.mde-facts {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
}

.mde-facts__item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
    .mde-facts { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
    .mde-facts__item { border-bottom: 0; padding: 1.5rem 1.5rem 1.5rem 0; }
    .mde-facts__item + .mde-facts__item { border-left: 1px solid var(--line); padding-left: 1.5rem; }
    .mde-facts__item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
    .mde-facts__item:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (min-width: 900px) {
    .mde-facts { grid-template-columns: repeat(4, 1fr); }
    .mde-facts__item:nth-child(3),
    .mde-facts__item:nth-child(4) { border-top: 0; }
    .mde-facts__item:nth-child(3) { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}

.mde-facts__idx {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.mde-facts__idx b {
    font-weight: 500;
    color: var(--accent);
}

.mde-facts__title {
    margin: .625rem 0 .375rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}

.mde-facts__text {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--ink-3);
}

/* ── 9. IMAGEN ENMARCADA ───────────────────────────────────────────────── */

.mde-figure {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-2);
}

.mde-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mde-figure--wide img {
    aspect-ratio: 21 / 8;
}

@media (max-width: 767px) {
    .mde-figure--wide img { aspect-ratio: 16 / 10; }
}

.mde-figure__tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .6875rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mde-figure__tag { background: var(--bg); }
}

.mde-figure__tag i {
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background: var(--ok);
}

/* ── 10. MARCA DE PLATAFORMAS ──────────────────────────────────────────── */

.mde-logos {
    padding-block: clamp(2rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.mde-logos__label {
    text-align: center;
    margin-bottom: 1.5rem;
}

.mde-logos .marquee-container {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mde-logos__item {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin-inline: clamp(1.25rem, 3vw, 2.25rem);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink-3);
    transition: color .2s var(--ease);
}

.mde-logos__item svg {
    width: 1.125rem;
    height: 1.125rem;
}

@media (hover: hover) {
    .mde-logos__item:hover { color: var(--ink); }
}

/* ── 11. BLOQUE PARTIDO (texto + medio) ────────────────────────────────── */

.mde-split {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 1024px) {
    .mde-split { grid-template-columns: 1fr 1fr; }
}

.mde-split__media { min-width: 0; }
.mde-split__body { min-width: 0; }

/* ── 11 bis. BANDA A SANGRE ────────────────────────────────────────────────
   La foto sale por el borde del viewport, ocupa el alto entero de la banda y
   se funde con el fondo por el lado que da al texto. Sin marco ni sombra: la
   presencia la da el sangrado, el ritmo lo dan los filetes de la columna de
   lectura, y la integración la da el fundido.

   Móvil: el lateral se queda en el último 12% —el mismo porcentaje que en
   escritorio se comería media imagen, porque la foto mide ~360 px— y el peso
   del efecto se va al borde de abajo, que es por donde entra el texto. */

.mde-band {
    padding-block: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;

    --band-fade-x: linear-gradient(to right,
        #000 0%, #000 78%, rgba(0, 0, 0, .55) 90%, transparent 100%);
    --band-fade-y: linear-gradient(to bottom,
        #000 0%, #000 56%, rgba(0, 0, 0, .3) 82%, transparent 100%);
}

/* El div de la imagen no tiene alto propio: lo pone la fila (la columna de
   texto). La foto se posiciona en absoluto para no depender de que el alto
   estirado del grid sea "definido".

   Sin `background`: el fundido de abajo deja ver lo que haya detrás, y un
   --surface de relleno se colaría como una franja más clara que el fondo. */
.mde-band__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;

    /* Fundido vertical, sólo móvil (ver el bloque de escritorio). Va en el
       contenedor y el horizontal en la foto: dos máscaras en dos elementos se
       multiplican solas, sin depender de `mask-composite`, que Chrome no
       entendió hasta la 120. */
    -webkit-mask-image: var(--band-fade-y);
            mask-image: var(--band-fade-y);
}

/* Fundido de la foto hacia el fondo de la sección. No es una capa de color
   encima: es la propia foto la que se desvanece, así el degradado va a parar
   al fondo real —oscuro o claro— sin declarar un solo color. La curva es la
   de la versión antigua, invertida (allí era opacidad de la capa, aquí es
   opacidad de la imagen). Si el navegador no soporta máscaras, ignora las dos
   declaraciones y la foto se ve a corte recto: no se rompe nada. */
.mde-band__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    -webkit-mask-image: var(--band-fade-x);
            mask-image: var(--band-fade-x);
}

.mde-band__body {
    padding-inline: var(--pad-x);
    padding-block: var(--sec-y);
}

@media (min-width: 1024px) {
    /* El carril derecho va en el contenedor, no en la columna: así el 100% se
       mide contra el ancho de la sección y el borde del texto cae exactamente
       donde cae el de .mde-shell en el resto de la página. */
    .mde-band {
        padding-right: calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x));
        grid-template-columns: minmax(0, 1fr) minmax(0, min(52%, 42rem));

        /* Curva larga: empieza a ceder a media foto y sólo se entrega del 75%
           en adelante. Sobre ~800 px de foto son ~200 px de transición. */
        --band-fade-x: linear-gradient(to right,
            #000 0%, rgba(0, 0, 0, .85) 35%, rgba(0, 0, 0, .25) 75%, transparent 100%);
    }

    .mde-band__media {
        aspect-ratio: auto;
        min-height: clamp(30rem, 42vw, 38rem);

        /* Sólo el lateral: la foto llega a los filetes de arriba y abajo. */
        -webkit-mask-image: none;
                mask-image: none;
    }

    /* El tope de 42rem congela la medida de lectura: a partir de ahí el ancho
       que sobra se lo queda la foto, no el párrafo. */
    .mde-band__body {
        padding-inline: clamp(2.5rem, 4.5vw, 4rem) 0;
    }
}

/* Cifras en filete, no en tarjeta: el dato entra antes que el titular, como
   en la versión antigua, pero sin caja que lo aísle del resto. */
.mde-band__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.25rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mde-band__stat {
    padding-block: clamp(1rem, 2vw, 1.375rem);
}

.mde-band__stat + .mde-band__stat {
    border-left: 1px solid var(--line);
    padding-left: clamp(.875rem, 2vw, 1.5rem);
}

.mde-band__stat:not(:last-child) {
    padding-right: clamp(.875rem, 2vw, 1.5rem);
}

.mde-band__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.mde-band__label {
    display: block;
    margin-top: .625rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.35;
}

/* Ritmo vertical de la columna. Va con el padre delante a propósito: los
   bloques base (.mde-checks, .mde-quote) se declaran más abajo con la misma
   especificidad y ganarían el margen por orden. */
.mde-band__body .mde-band__title { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.mde-band__body .mde-band__lead  { margin-top: 1.125rem; }

.mde-band__body .mde-band__checks {
    margin-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.mde-band__body .mde-band__checks li:first-child { padding-top: 1rem; }
/* Párrafo de cierre de la banda. Sustituye al testimonio con avatar y firma que
   había aquí: sin caja, sin filete de color y sin atribución, porque el texto ya
   no es la cita de nadie. Se distingue del párrafo de entrada por el cuerpo algo
   mayor, no por adornos; el tope de medida evita el renglón interminable cuando
   la columna se ensancha en escritorio. */
.mde-band__body .mde-band__note {
    margin: 1.75rem 0 0;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    letter-spacing: -.012em;
    color: var(--ink-2);
    max-width: 62ch;
    text-wrap: pretty;
}

/* ── 12. MÉTRICAS ──────────────────────────────────────────────────────── */

/* Banda de resultados: filetes, sin caja */
.mde-kpis {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
    .mde-kpis { grid-template-columns: repeat(3, 1fr); }
}

.mde-kpis__item {
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}

.mde-kpis__item + .mde-kpis__item {
    border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
    .mde-kpis__item { padding-inline: 1.75rem; }
    .mde-kpis__item:first-child { padding-left: 0; }
    .mde-kpis__item + .mde-kpis__item { border-top: 0; border-left: 1px solid var(--line); }
}

/* Cuatro cifras: en la retícula de tres el cuarto dato caía solo en una
   segunda fila. Va de 1 a 2 y de 2 a 4 columnas, con el mismo trasiego de
   filetes que la tira de la portada. */
@media (min-width: 640px) {
    .mde-kpis--4 { grid-template-columns: repeat(2, 1fr); }
    .mde-kpis--4 .mde-kpis__item:nth-child(3) {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--line);
    }
    .mde-kpis--4 .mde-kpis__item:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (min-width: 900px) {
    .mde-kpis--4 { grid-template-columns: repeat(4, 1fr); }
    .mde-kpis--4 .mde-kpis__item:nth-child(3) {
        border-left: 1px solid var(--line);
        padding-left: 1.75rem;
        border-top: 0;
    }
    .mde-kpis--4 .mde-kpis__item:nth-child(4) { border-top: 0; }
}

.mde-kpis__value {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: block;
    /* Halo muy abierto y muy tenue: a este tamaño la cifra es el elemento con
       más peso de la sección, y el halo la despega del fondo sin recurrir a
       una caja. Se apaga solo en tema claro (el token vale 'none'). */
    text-shadow: var(--glow-value);
}

/* Filete de acento sobre cada cifra. Hace dos cosas a la vez: da el único
   toque de color de la banda, y pone las tres columnas a arrancar en la misma
   línea óptica, que es lo que faltaba para que el conjunto se leyera ordenado
   en lugar de como tres bloques sueltos. */
.mde-kpis__value::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-bottom: .875rem;
    border-radius: 1px;
    background: var(--accent);
    box-shadow: var(--glow-rule);
}

.mde-kpis__label {
    display: block;
    margin-top: .75rem;
    font-size: .8125rem;
    line-height: 1.5;
    /* Era --ink-3, que sobre el fondo se quedaba corto de contraste para un
       texto de 13px. --ink-2 lo deja legible sin restarle jerarquía a la cifra. */
    color: var(--ink-2);
    max-width: 24ch;
    /* Evita que la última palabra caiga sola: los tres textos miden distinto y
       el reparto por defecto dejaba renglones huérfanos que descuadraban la fila. */
    text-wrap: pretty;
}

/* ── 13. LISTA DE COMPROBACIÓN ─────────────────────────────────────────── */

.mde-checks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mde-checks li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ink);
}

.mde-checks li + li {
    border-top: 1px solid var(--line);
}

.mde-checks svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: .1875rem;
    color: var(--accent);
}

.mde-checks--bad svg { color: var(--bad); }
.mde-checks--ok svg { color: var(--ok); }

/* ── 14. PANELES PROBLEMA / SOLUCIÓN ───────────────────────────────────── */

.mde-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .mde-panel { padding: 1.5rem; }
}

.mde-panel__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding-bottom: .875rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.mde-panel__head svg {
    width: .9375rem;
    height: .9375rem;
    flex-shrink: 0;
}

.mde-panel--bad .mde-panel__head svg { color: var(--bad); }
.mde-panel--ok .mde-panel__head svg { color: var(--ok); }

/* ── 14 bis. FILA DE DIAGNÓSTICO (2 cajas + captura) ───────────────────────
   Los tres en línea, y el contenedor lleva también .mde-shell: misma anchura
   y mismos márgenes que el titular de encima y que el resto de la página. Sin
   sangrado. Aquí no lo aguantaba: en la banda anterior la foto ocupa un borde
   y enfrente tiene una columna de texto que la equilibra; aquí el titular está
   arriba, así que sangrar por la derecha dejaba ~390 px de vacío a un lado y
   cero al otro.

   La captura conserva el radio de las cajas para que las tres piezas sean de
   la misma familia, pero sin borde: un filete alrededor de un canto que está
   hecho para disolverse se contradice.

   El fundido se queda, y es más corto que el de la banda a propósito: allí se
   desvanece una foto y no se pierde nada; aquí se desvanece una captura con
   gráficos y cifras, y la curva larga se comería la parte con los datos. */

.mde-diag {
    display: grid;
    gap: 1rem;

    /* Corto en pantalla estrecha: apilada, la captura es una tarjeta más y un
       fundido largo la haría parecer una imagen rota. */
    --diag-fade-x: linear-gradient(to left,
        #000 0%, #000 84%, rgba(0, 0, 0, .5) 93%, transparent 100%);
}

.mde-diag__media {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: var(--r-md);
    aspect-ratio: 16 / 10;
}

.mde-diag__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    -webkit-mask-image: var(--diag-fade-x);
            mask-image: var(--diag-fade-x);
}

/* Las dos cajas a la par y la captura debajo. Tres en línea aquí dejaría cada
   caja en ~230 px de texto y partiría "Métricas relevantes (CPL, CAC,
   conversión)" en tres renglones. */
@media (min-width: 560px) and (max-width: 1023px) {
    .mde-diag { grid-template-columns: 1fr 1fr; }
    .mde-diag__media { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    /* Tres columnas iguales: la fila reparte el ancho a partes iguales y cae
       exactamente sobre los bordes del titular. */
    .mde-diag {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(1rem, 2vw, 1.5rem);
        align-items: stretch;

        /* Opaca hasta bien entrada la imagen; sólo se disuelve en el borde
           exterior, que es el que no lleva datos. */
        --diag-fade-x: linear-gradient(to left,
            #000 0%, #000 58%, rgba(0, 0, 0, .45) 82%, transparent 100%);
    }

    /* El alto lo marcan las cajas (~14 rem con su contenido). El suelo sólo
       evita que la captura quede en una franja estrecha si alguna vez las
       cajas adelgazan. */
    .mde-diag__media {
        aspect-ratio: auto;
        min-height: 14rem;
    }
}

/* ── 15. RETÍCULA DE FILETES (servicios, proceso, industrias) ──────────── */

.mde-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.mde-grid__cell,
.mde-grid__item {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    transition: background-color .22s var(--ease);
}

/* .mde-grid__item se usa 64 veces en nueve páginas y no tenía una sola regla:
   el marcado pedía una celda de esta retícula y el nombre no existía en el CSS.
   Sin padding, las tarjetas salían pegadas al filete; sin `border-right` ni
   `border-bottom`, la cuadrícula no cerraba y el `border-left` que pone
   `.mde-grid` quedaba huérfano -- esa era la línea fina y larga que bajaba por
   el costado izquierdo hasta el último servicio.

   Lo propio de esta variante es que la celda es un <a>: hay que apagar el
   subrayado y heredar el color, y la columna con `margin-top: auto` en el
   enlace final es lo que deja todos los "Ver el servicio" alineados abajo por
   mucho que difieran los textos de arriba. */
.mde-grid__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

.mde-grid__item > .mde-link {
    margin-top: auto;
    padding-top: 1rem;
}

.mde-sec--alt .mde-grid__cell { background: var(--bg-alt); }

@media (hover: hover) {
    .mde-grid__cell:hover,
    .mde-grid__item:hover { background: var(--surface-hover); }
}

@media (min-width: 560px) {
    .mde-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .mde-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .mde-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tres celdas en dos columnas dejaban un hueco con filete a medio cerrar: la
   tercera ocupa la fila entera. Sólo mientras haya dos columnas — pasada esa
   franja las tres caben en fila y el ensanche sobra. */
@media (min-width: 560px) and (max-width: 899.98px) {
    .mde-grid--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
    .mde-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .mde-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .mde-grid--3 > :nth-child(3):last-child { grid-column: auto; }
}

/* ── Índice de servicios ──────────────────────────────────────────────────
   Tres columnas y no cuatro, que es lo que usaba antes. Con cuatro, cada
   tarjeta se queda en unos 244 px útiles: 34 caracteres por línea, muy por
   debajo de los 45 a 75 que pide un texto legible, y por eso el bloque se veía
   apretado y como relleno a la fuerza. Con tres son 48, dentro del rango.

   Es una clase propia y no un cambio en .mde-grid--4 porque esa variante se usa
   en otras cinco retículas del sitio -- industrias, entregables, el proceso --
   que llevan una línea de texto por celda y con cuatro columnas están bien. */
.mde-grid--idx { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .mde-grid--idx { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .mde-grid--idx { grid-template-columns: repeat(3, 1fr); }
}

/* La última fila se cierra estirando el último elemento sobre las columnas que
   quedarían vacías. Sin esto el filete muere a medio camino: ocho servicios en
   tres columnas dejan un hueco, y siete dejan dos. El texto de dentro conserva
   su medida con el max-width de abajo, así que ensanchar la caja no ensancha la
   lectura. */
@media (min-width: 1000px) {
    .mde-grid--idx > :nth-child(3n+2):last-child { grid-column: span 2; }
    .mde-grid--idx > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
}

@media (min-width: 640px) and (max-width: 999.98px) {
    .mde-grid--idx > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
}

.mde-grid--idx .mde-grid__title,
.mde-grid--idx .mde-p--sm,
.mde-grid--idx .mde-eyebrow { max-width: 34rem; }

.mde-grid__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--accent);
    margin-bottom: 1rem;
}

.mde-grid__icon svg { width: 1.125rem; height: 1.125rem; }

.mde-grid__num {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--accent);
    display: block;
    margin-bottom: .875rem;
}

.mde-grid__title {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}

.mde-grid__text {
    margin: 0;
    font-size: .8438rem;
    line-height: 1.55;
    color: var(--ink-3);
}

/* ── 16. CITA ──────────────────────────────────────────────────────────── */

.mde-quote {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.mde-quote blockquote {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.55;
    letter-spacing: -.012em;
    color: var(--ink);
    text-wrap: pretty;
}

.mde-quote figcaption {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.mde-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--surface-2);
    color: var(--ink-3);
}

.mde-quote__avatar svg { width: 1.0625rem; height: 1.0625rem; }

.mde-quote__who {
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.mde-quote__where {
    margin: .125rem 0 0;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Sin caja. Dentro de una columna que ya es una pila de filetes, la tarjeta
   sonaba a widget pegado al final. Va después de las reglas base: misma
   especificidad, así que el orden es lo único que decide. */
.mde-quote--flat {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    padding: 1.75rem 0 0;
}

.mde-quote--flat blockquote {
    color: var(--ink-2);
}

.mde-quote--flat figcaption {
    border-top: 0;
    margin-top: 1.125rem;
    padding-top: 0;
}

/* ── 17. VÍDEO ─────────────────────────────────────────────────────────── */

.mde-video {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-2);
    aspect-ratio: 16 / 9;
}

.mde-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── 18. LLAMADA FINAL ─────────────────────────────────────────────────── */

.mde-call {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: clamp(1.75rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mde-call::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    transform: translateX(-50%);
    width: min(24rem, 60%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.mde-call .mde-lead {
    margin-inline: auto;
    margin-top: 1rem;
}

.mde-call .mde-btnrow {
    justify-content: center;
    margin-top: 2rem;
}

/* ── 19. PREGUNTAS ─────────────────────────────────────────────────────── */

.mde-faq {
    border-top: 1px solid var(--line);
}

.mde-faq details {
    border-bottom: 1px solid var(--line);
}

.mde-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem .25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(.9375rem, 1.3vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ink);
    transition: color .18s var(--ease);
}

.mde-faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
    .mde-faq summary:hover { color: var(--accent); }
}

.mde-faq summary svg {
    width: 1.0625rem;
    height: 1.0625rem;
    flex-shrink: 0;
    color: var(--ink-3);
    transition: transform .28s var(--ease), color .18s var(--ease);
}

.mde-faq details[open] summary svg {
    transform: rotate(180deg);
    color: var(--accent);
}

.mde-faq__body {
    padding: 0 .25rem 1.375rem;
    font-size: .9063rem;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 68ch;
}

/* ── 20. CONTACTO: puentes con el bloque que ya existe en output.css ───── */

.contacto-grid { align-items: start; }

.mde-card {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-3);
}

.mde-card__title {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -.025em;
}

.mde-card__intro { color: var(--ink-2); }

.mde-trust {
    color: var(--ink-2);
    border-top-color: var(--line);
}

.mde-trust svg { color: var(--accent); }

.mde-label { color: var(--ink-2); }
.mde-label span { color: var(--ink-3); }

.mde-input {
    color: var(--ink);
    background: var(--bg-alt);
    border-color: var(--line-2);
}

/* 16 px en pantallas táctiles. output.css deja los campos en 14 px, y por
   debajo de 16 iOS Safari amplía la página al enfocar el campo -- y no la
   devuelve al salir: el visitante se queda con el formulario desplazado a
   media pantalla, justo cuando iba a escribir. Se limita a `pointer: coarse`
   para no engordar el formulario en escritorio, donde ese zoom no existe.

   Va aquí y no en output.css, que es donde vive el 14 px, porque output.css
   se sirve sin `?v=` y con un mes de caché: el cambio no llegaría a quien ya
   conoce el sitio. */
@media (pointer: coarse) {
    .mde-input { font-size: 1rem; }
}

:root[data-theme="light"] .mde-input { background: #fff; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mde-input { background: #fff; }
}

.mde-input::placeholder { color: var(--ink-3); }
@media (hover: hover) {
    .mde-input:hover { border-color: var(--line-2); }
}

.mde-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.mde-verify {
    background: var(--bg-alt);
    border-color: var(--line);
}

.mde-verify__head { color: var(--ink-2); }
.mde-verify__hint { color: var(--ink-3); }
.mde-verify__status--loading { color: var(--ink-3); }

.mde-verify.is-ok {
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
    background: color-mix(in srgb, var(--ok) 7%, var(--bg-alt));
}

.mde-verify.is-error {
    border-color: color-mix(in srgb, var(--bad) 40%, transparent);
    background: color-mix(in srgb, var(--bad) 7%, var(--bg-alt));
}

.mde-verify__retry { color: var(--accent); }
@media (hover: hover) {
    .mde-verify__retry:hover { color: var(--accent-hover); }
}

.mde-btn {
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;
    border-radius: var(--r-sm);
    padding: .8125rem 1.25rem;
}

.mde-btn:focus-visible { outline-color: var(--accent); }

.mde-btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
}

@media (hover: hover) {
    .mde-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
}

.mde-btn--primary:disabled {
    background: var(--surface-2);
    color: var(--ink-3);
    border-color: var(--line-2);
}

.mde-btn--ghost {
    border-color: var(--line-2);
    color: var(--ink-2);
}

@media (hover: hover) {
    .mde-btn--ghost:hover {
        background: var(--surface-2);
        border-color: var(--line-2);
        color: var(--ink);
    }
}

.mde-formnote { color: var(--ink-3); }

.mde-steptext { color: var(--accent); font-family: var(--font-mono); letter-spacing: .06em; }

/* Aquí vivían las reglas .stepper-* que domaban el stepper de dos pasos del
   inicio (neutralizar el pulso y los halos que traía de output.css). Ese
   stepper ya no existe: los tres formularios del sitio usan .mde-steps. */

/* ── 19 ter. MIGAS ─────────────────────────────────────────────────────────
   Sobre la línea del héroe, en mono como el resto de los índices. */

.mde-crumbs {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.mde-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mde-crumbs li { display: flex; align-items: center; gap: .5rem; }
.mde-crumbs a { color: var(--ink-3); text-decoration: none; }
@media (hover: hover) {
    .mde-crumbs a:hover { color: var(--accent); }
}
.mde-crumbs [aria-current] { color: var(--ink-2); }
.mde-crumbs__sep { color: var(--line-2); }

/* ── 19 quater. FICHAS DE CATEGORÍA ────────────────────────────────────────
   Atajos a cada servicio bajo la portada. Filete y mono: son índice, no
   botones; los botones de verdad de la portada están justo encima. */

.mde-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.mde-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* 2.25rem de alto + el relleno deja el objetivo táctil en 40 px, el mínimo
       para una fila densa; no llegan a 44 porque son cinco en una línea. */
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color .18s var(--ease), color .18s var(--ease),
                background-color .18s var(--ease);
}

.mde-chip svg { width: .875rem; height: .875rem; flex-shrink: 0; color: var(--accent); }

@media (hover: hover) {
    .mde-chip:hover {
        border-color: var(--accent-line);
        background: var(--accent-soft);
        color: var(--ink);
    }
}

/* ── 19 quinquies. FICHA TÉCNICA ───────────────────────────────────────────
   Entregable / tiempo / métrica al pie de cada servicio, y el precio en las
   tarjetas de cotización. Pares dato-etiqueta separados por filete, sin caja
   propia: ya viven dentro de un .mde-panel. */

.mde-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

@media (min-width: 480px) {
    .mde-meta--2 { grid-template-columns: 1fr 1fr; }
}

.mde-meta__full { grid-column: 1 / -1; }

.mde-meta__label {
    display: block;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .375rem;
}

.mde-meta__value {
    display: block;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}

.mde-meta__value--strong {
    color: var(--ink);
    font-weight: 600;
}

/* ── 19 sexies. ARTÍCULO DE SERVICIO ───────────────────────────────────────
   Cinco servicios en fila, separados por filete y alternando el lado de la
   ficha para que la página no se lea como cinco veces lo mismo. */

.mde-svc + .mde-svc {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
    .mde-svc--flip .mde-split__body { order: 2; }
    .mde-svc--flip .mde-split__media { order: 1; }
}

/* ── 20 bis. FORMULARIO POR TRAMOS ─────────────────────────────────────────
   Índice de tres tramos para el formulario de talento. El de dos pasos del
   inicio usa dos puntos y una barra de progreso; con tres tramos esa barra ya
   no dice nada, así que aquí el progreso lo marcan los filetes entre números,
   que es además el lenguaje del resto de la página. */

.mde-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 0 1rem;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--line);
}

.mde-steps__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    /* .1em como el resto de la mono deja los tres rótulos en 372 px dentro de
       una tarjeta de 374: cabe de milagro, y con la mono de reserva no cabría. */
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    transition: color .25s var(--ease);
}

/* Filete de unión. Va en el ::before del siguiente y no en un elemento suelto:
   así el marcado sólo describe tramos, no la decoración entre ellos. */
.mde-steps__item + .mde-steps__item::before {
    content: "";
    width: clamp(.5rem, 3.5vw, 1rem);
    height: 1px;
    flex-shrink: 0;
    background: var(--line-2);
    transition: background-color .25s var(--ease);
}

/* Que el rótulo no se parta en dos líneas y desnivele la fila de números. */
.mde-steps__label { white-space: nowrap; }

.mde-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.mde-steps__num svg {
    width: .8125rem;
    height: .8125rem;
}

.mde-steps__item.is-active { color: var(--ink-2); }

.mde-steps__item.is-active .mde-steps__num {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Cumplido: contorno de acento, no relleno. El relleno se reserva para el
   tramo en el que estás, que es la única información que hay que buscar. */
.mde-steps__item.is-done .mde-steps__num {
    background: transparent;
    border-color: var(--accent-line);
    color: var(--accent);
}

.mde-steps__item.is-done + .mde-steps__item::before,
.mde-steps__item.is-active::before {
    background: var(--accent-line);
}

/* Por debajo de 30rem no caben tres rótulos dentro de la tarjeta. Quedan los
   números, y el tramo en curso lo nombra la línea de texto de debajo. Se oculta
   a la vista, no al lector de pantalla: ahí el número solo no dice nada. */
@media (max-width: 29.99rem) {
    .mde-steps__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Los tres tramos ocupan el mismo hueco: la altura la fija el más alto (la
   calcula main.js), así el botón no se mueve bajo el cursor al avanzar. */
.mde-stack-steps {
    display: grid;
    margin-top: 1.5rem;
}

/* El tramo ocupa todo el hueco reservado y centra lo suyo dentro. Sin esto, el
   primero —que es el más corto— dejaba un agujero de 140 px bajo la caja de
   verificación que parecía contenido que no había cargado. */
.mde-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* .mde-btn declara display:inline-flex con la misma especificidad que el
   [hidden] de la base y gana por orden de fuente, así que un botón oculto
   seguía viéndose. Con el atributo en el selector la cuenta ya no empata. */
.mde-step[hidden],
.mde-btn[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .mde-step {
        transition: opacity .28s var(--ease), transform .28s var(--ease);
    }

    /* Estado de partida del tramo entrante; main.js lo retira en el siguiente
       fotograma. El saliente no se anima: en un formulario el que importa es
       el que llega, y animar los dos duplica la espera. */
    .mde-step--in {
        opacity: 0;
        transform: translate3d(10px, 0, 0);
    }

    .mde-step--in-back {
        transform: translate3d(-10px, 0, 0);
    }
}

/* Bloques informativos junto al formulario */
.mde-assure {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 0;
}

.mde-assure + .mde-assure { border-top: 1px solid var(--line); }

.mde-assure__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--accent);
}

.mde-assure__icon svg { width: 1rem; height: 1rem; }

/* Por clase y no por etiqueta: estos títulos cuelgan de un h2 de sección, así
   que son h3. Atarlos a `h4` obligaba a romper la jerarquía para no perder el
   estilo. */
.mde-assure__title {
    margin: 0 0 .125rem;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
}

.mde-assure p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ink-3);
}

/* ── 21. PIE ───────────────────────────────────────────────────────────── */

.mde-footer {
    border-top: 1px solid var(--line);
    background: var(--bg-alt);
    padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.mde-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 560px) {
    .mde-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* La cuarta columna lleva el correo, que es una sola palabra de 30 caracteres.
   Con cuatro fracciones iguales no le cabía y se partía en `…efecto` / `.com`;
   el `minmax` le garantiza el ancho de esa línea y el resto se reparte solo. */
@media (min-width: 1000px) {
    .mde-footer__grid { grid-template-columns: 1.4fr 1fr 1fr minmax(18rem, 1.1fr); }
}

/* 10 px con .14em de letra suelta se caía de legible en pantalla de móvil;
   .6875rem es el mínimo que sostiene un cintillo en versal a esta distancia. */
.mde-footer__title {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1rem;
}

/* El aire entre enlaces vive en el padding de cada uno, no en el gap de la
   lista: así el ritmo visual es el mismo pero el objetivo táctil pasa de los
   ~20 px de la caja de texto a ~34 px. */
.mde-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.mde-footer__list a {
    display: inline-block;
    padding-block: .3125rem;
    font-size: .875rem;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .18s var(--ease);
}

@media (hover: hover) {
    .mde-footer__list a:hover { color: var(--accent); }
}

.mde-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    font-size: .875rem;
    color: var(--ink-2);
}

.mde-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.mde-footer__contact svg {
    width: .9375rem;
    height: .9375rem;
    flex-shrink: 0;
    margin-top: .1875rem;
    color: var(--ink-3);
}

/* La línea de apoyo de la dirección iba con `.mde-p--sm`, que a .875rem pesa
   exactamente lo mismo que la lista que la contiene: se leía como una segunda
   línea principal en vez de como una nota. */
.mde-footer__contact .mde-p--sm {
    display: inline-block;
    font-size: .8125rem;
    line-height: 1.45;
}

.mde-footer__contact a {
    display: inline-block;
    padding-block: .25rem;
    color: var(--ink-2);
    text-decoration: none;
    overflow-wrap: break-word;
}

@media (hover: hover) {
    .mde-footer__contact a:hover { color: var(--accent); }
}

.mde-social {
    display: flex;
    gap: .5rem;
}

/* 32 px es un objetivo táctil corto para un dedo; en escritorio, donde apunta
   un ratón, la caja pequeña es la que encaja con el resto del pie. */
.mde-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-3);
    text-decoration: none;
    font-size: .8125rem;
    transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

@media (hover: hover) {
    .mde-social a:hover {
        color: var(--accent);
        border-color: var(--accent-line);
        background: var(--accent-soft);
    }
}

@media (min-width: 900px) {
    .mde-social a { width: 2rem; height: 2rem; }
}

.mde-footer__bar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
    text-align: center;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .75rem;
    color: var(--ink-3);
}

.mde-footer__bar p { margin: 0; text-wrap: pretty; }

@media (min-width: 640px) {
    .mde-footer__bar { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Los dos avisos legales se separaban con un `·` suelto. En móvil no caben en
   la misma línea, y el punto se quedaba colgando al final de la primera: aquí
   la separación la da el `gap`, que desaparece solo cuando el bloque se apila. */
.mde-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 1.25rem;
}

@media (min-width: 640px) {
    .mde-footer__legal { justify-content: flex-end; }
}

/* Un enlace y un botón, uno junto al otro: sin subrayado en ambos, el botón no
   se distinguía de texto corrido. El filete tenue los iguala sin ruido. */
.mde-footer__bar a,
.mde-footer__bar .mdf-link {
    display: inline-block;
    padding-block: .3125rem;
    color: var(--ink-3);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 3px;
    transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}

@media (hover: hover) {
    .mde-footer__bar a:hover,
    .mde-footer__bar .mdf-link:hover {
        color: var(--accent);
        text-decoration-color: currentColor;
    }
}

/* ── 22. MOVIMIENTO ────────────────────────────────────────────────────────
   Un solo momento con autor: la entrada escalonada de la portada. El resto
   de la página es estática y responde al puntero, no al scroll. */

@media (prefers-reduced-motion: no-preference) {
    .mde-enter > * {
        animation: mdeRise .7s var(--ease) both;
    }

    .mde-enter > :nth-child(1) { animation-delay: .04s; }
    .mde-enter > :nth-child(2) { animation-delay: .12s; }
    .mde-enter > :nth-child(3) { animation-delay: .2s; }
    .mde-enter > :nth-child(4) { animation-delay: .28s; }
    .mde-enter > :nth-child(5) { animation-delay: .36s; }
    .mde-enter > :nth-child(6) { animation-delay: .44s; }
}

@keyframes mdeRise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ── 23. CURSOR ──────────────────────────────────────────────── */

body.mde #cursor-dot { background: var(--accent); }
body.mde #cursor-ring { border-color: var(--accent-line); }

/* El aviso de cookies ya no se parchea desde aquí. Sus estilos viven en
   cookie-cursor.css, escritos con var(--token, respaldo): las cuatro páginas
   cargan esta hoja, así que el aviso sigue el tema en todas y es uno solo. */

/* ═══════════════════════════════════════════════════════════════════════════
   VISUALES DE LAS PÁGINAS DE SERVICIO
   ───────────────────────────────────────────────────────────────────────────
   Cero archivos de imagen. Cada figura se dibuja con caja, borde y gradiente
   sobre los mismos tokens que el resto del sistema, así que sigue el tema
   claro/oscuro sin una sola regla duplicada y pesa lo que ocupa aquí.

   Motivo real, no capricho: un AVIF de 1200 px ronda los 20-40 KB y hay que
   subirlo, versionarlo y servirlo; esto viaja dentro de un CSS que el
   navegador ya tenía en caché desde la primera página.

   Todas las figuras son decorativas: van con aria-hidden y la información que
   ilustran está escrita en el texto contiguo.
   ═══════════════════════════════════════════════════════════════════════════ */

.mde-viz {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.mde-viz__cap {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Rejilla de fondo: una sola capa, sin imágenes. */
.mde-viz::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .35;
    pointer-events: none;
}

.mde-viz > * { position: relative; }

/* ── 1 · Barras de plataforma ─────────────────────────────────────────────
   Reparto de inversión por red. La anchura la fija --v en el marcado.        */

.mde-viz__bars { display: flex; flex-direction: column; gap: .875rem; }

.mde-viz__bar { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: .75rem; }

.mde-viz__bar b {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-2);
}

.mde-viz__track {
    height: .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow: hidden;
}

.mde-viz__fill {
    display: block;
    height: 100%;
    width: var(--v, 50%);
    border-radius: 999px;
    background: var(--accent);
}

.mde-viz__bar--soft .mde-viz__fill { background: var(--accent-line); }

.mde-viz__val {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ── 2 · Marcos verticales de vídeo ──────────────────────────────────────── */

.mde-viz__reels { display: flex; gap: .75rem; justify-content: center; }

.mde-viz__reel {
    flex: 1 1 0;
    max-width: 5.5rem;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: linear-gradient(160deg, var(--accent-soft), var(--surface-2));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .5rem;
    gap: .25rem;
}

.mde-viz__reel span {
    display: block;
    height: .3rem;
    border-radius: 999px;
    background: var(--line-2);
}

.mde-viz__reel span:first-child { width: 80%; background: var(--accent); }
.mde-viz__reel span:last-child { width: 55%; }
.mde-viz__reel--lead { transform: scale(1.06); border-color: var(--accent-line); }

/* ── 3 · Resultado de búsqueda ───────────────────────────────────────────── */

.mde-viz__serp { display: flex; flex-direction: column; gap: .75rem; }

.mde-viz__row {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    padding: .75rem .875rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.mde-viz__row--mark { border-color: var(--accent-line); background: var(--accent-soft); }

.mde-viz__tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent-line);
    border-radius: .25rem;
    padding: .1rem .35rem;
}

.mde-viz__line {
    display: block;
    height: .4rem;
    border-radius: 999px;
    background: var(--line-2);
    width: var(--w, 100%);
}

.mde-viz__line--title { height: .55rem; background: var(--ink-3); }

/* ── 4 · Embudo de conversión ────────────────────────────────────────────── */

.mde-viz__funnel { display: flex; flex-direction: column; gap: .5rem; align-items: center; }

.mde-viz__stage {
    width: var(--w, 100%);
    padding: .55rem .75rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--ink-2);
}

.mde-viz__stage b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── 5 · Columnas de pipeline ────────────────────────────────────────────── */

.mde-viz__pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }

.mde-viz__col { display: flex; flex-direction: column; gap: .4rem; }

.mde-viz__col > b {
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mde-viz__chip {
    height: 1.5rem;
    border-radius: .3rem;
    border: 1px solid var(--line-2);
    background: var(--surface-2);
}

.mde-viz__chip--on { border-color: var(--accent-line); background: var(--accent-soft); }

/* ── 6 · Fichas de producto ──────────────────────────────────────────────── */

.mde-viz__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }

.mde-viz__card {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.mde-viz__thumb {
    aspect-ratio: 4 / 3;
    border-radius: .25rem;
    background: linear-gradient(140deg, var(--accent-soft), var(--line));
    border: 1px solid var(--line);
}

.mde-viz__card--top { border-color: var(--accent-line); }
.mde-viz__card--top .mde-viz__thumb { background: linear-gradient(140deg, var(--accent), var(--accent-line)); }

/* ── 7 · Respuesta generativa con citas ──────────────────────────────────── */

.mde-viz__answer {
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    padding: .875rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mde-viz__cites { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; }

.mde-viz__cite {
    font-family: var(--font-mono);
    font-size: .625rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: .15rem .5rem;
    color: var(--ink-3);
    background: var(--surface);
}

.mde-viz__cite--me { color: var(--accent); border-color: var(--accent); }

/* ── Bloque de métricas esperadas ────────────────────────────────────────── */

/* Se llamaba .mde-kpis, exactamente igual que la banda de resultados de la
   portada (ver "12. MÉTRICAS"), y son dos componentes distintos: aquella es
   una tira de filetes SIN caja y ésta es una rejilla CON caja, fondo y radio.
   Al compartir nombre ganaba ésta por venir después en el archivo, así que la
   banda del inicio y la de /procesos se pintaban como una caja gris con la
   primera cifra pegada al borde. Ahora el contenedor lleva el nombre de su
   hijo (.mde-kpi) y cada componente se queda con lo suyo. */
.mde-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.mde-kpi { background: var(--surface); padding: 1.125rem 1rem; display: flex; flex-direction: column; gap: .3rem; }

.mde-kpi__v {
    font-family: var(--font-display, var(--font-body));
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mde-kpi__l { font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }

/* ── Cita de cliente ─────────────────────────────────────────────────────── */

/* Cita en línea: filete de acento a la izquierda, sin caja.
   Se llamaba .mde-quote, igual que la tarjeta de cita de la sección 15, y son
   dos componentes distintos. Al compartir nombre ganaba éste por venir después,
   así que la única cita de la web recibía este filete azul y este padding en
   lugar de los suyos. Hoy no lo usa ningún HTML; se conserva renombrado por si
   hace falta una cita sin caja, y así no puede volver a pisar a la otra. */
.mde-quote-inline {
    border-left: 2px solid var(--accent);
    padding: .25rem 0 .25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.mde-quote-inline p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

.mde-quote-inline footer {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--ink-3);
    font-style: normal;
}

@media (max-width: 40rem) {
    .mde-viz__pipe { grid-template-columns: repeat(2, 1fr); }
    .mde-viz__bar { grid-template-columns: 4.5rem 1fr auto; }
}

/* ── Submenú de Servicios ─────────────────────────────────────────────────
   Con JavaScript manda `.is-open`, que el script sincroniza con el ratón, el
   teclado y el toque (ver "SUBMENÚ DE SERVICIOS" en main.js). Sin él siguen
   valiendo `:hover` y `:focus-within`, así que el submenú se abre igual con
   ratón o tabulando y no depende de un script. En móvil no aplica: allí el
   cajón ya lista los subenlaces en plano. */

.mde-nav__group { position: relative; display: flex; align-items: center; }

/* El disparador es un <button>, no un enlace: abre el submenu en vez de
   navegar. Hay que neutralizar los estilos que el navegador da por defecto
   a los botones (tipografia propia, borde, fondo) o no casa con los <a>
   hermanos. Y el inline-flex es lo que mantiene texto y flecha en la misma
   linea: con la flecha como elemento en linea normal se apoyaba en la linea
   base, estiraba la caja y empujaba el texto hacia arriba. */
.mde-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    /* Heredado y no fijado: asi la pastilla de hover mide exactamente lo
       mismo que la de los enlaces vecinos, que solo llevan padding. */
    line-height: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    appearance: none;
}

.mde-nav__caret {
    width: .7rem;
    height: .7rem;
    flex: none;
    transition: transform .2s var(--ease);
}

/* Un solo estado manda: .is-open, que el script mantiene en sintonia con lo
   que se ve y con aria-expanded. Antes el CSS tambien abria por :hover, y las
   dos condiciones se peleaban: con el cursor encima el submenu ya estaba
   abierto, asi que el clic ponia .is-open sin cambiar nada, el siguiente clic
   la quitaba y tampoco cambiaba nada -- el :hover seguia ahi -- y al apartar
   el raton podia quedarse abierto solo. aria-expanded, ademas, decia "false"
   con el submenu a la vista.

   :hover y :focus-within siguen valiendo mientras el grupo no tenga .js-menu,
   que es la clase que el script pone al arrancar. Es lo que deja el submenu
   utilizable sin JavaScript; con el script cargado nunca compiten. */
.mde-nav__group.is-open .mde-nav__trigger,
.mde-nav__group:not(.js-menu):hover .mde-nav__trigger,
.mde-nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }

.mde-nav__group.is-open .mde-nav__caret,
.mde-nav__group:not(.js-menu):hover .mde-nav__caret,
.mde-nav__group:not(.js-menu):focus-within .mde-nav__caret,
.mde-nav__trigger[aria-expanded="true"] .mde-nav__caret { transform: rotate(180deg); }

.mde-nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, .35rem);
    min-width: 20rem;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    display: grid;
    gap: .125rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
    z-index: 60;
}

.mde-nav__group.is-open .mde-nav__sub,
.mde-nav__group:not(.js-menu):hover .mde-nav__sub,
.mde-nav__group:not(.js-menu):focus-within .mde-nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, .1rem);
}

.mde-nav__sub a {
    display: block;
    padding: .5rem .7rem;
    border-radius: var(--r-sm);
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .14s var(--ease), color .14s var(--ease);
}

.mde-nav__sub a:focus-visible { background: var(--accent-soft); color: var(--ink); }

@media (hover: hover) {
    .mde-nav__sub a:hover { background: var(--accent-soft); color: var(--ink); }
}

.mde-nav__sub a b { display: block; color: var(--ink); font-weight: 600; }

.mde-nav__sub li:last-child a {
    margin-top: .25rem;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    color: var(--accent);
    font-weight: 600;
}

/* Subenlaces del cajón móvil: sangrados bajo Servicios, sin desplegable. */
.mde-drawer__group { border: 0; }

.mde-drawer__group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mde-drawer__group > summary::-webkit-details-marker { display: none; }

.mde-drawer__group > summary .mde-nav__caret { margin-left: auto; }

.mde-drawer__group[open] > summary .mde-nav__caret { transform: rotate(180deg); }

.mde-drawer__sub {
    margin: 0 0 .5rem;
    padding: 0 0 0 2.35rem;
    list-style: none;
    display: grid;
    gap: .1rem;
    border-left: 1px solid var(--line);
    margin-left: 1.1rem;
}

.mde-drawer__sub a {
    display: block;
    padding: .4rem .25rem;
    font-size: .8125rem;
    color: var(--ink-3);
    text-decoration: none;
}

/* "Ver todos los servicios" cierra la lista y es la salida al índice completo,
   no un servicio más: en negrita se distingue de los ocho de arriba y deja de
   leerse como el noveno de la lista.
   Sólo afecta al móvil porque este submenú vive dentro del cajón, y el cajón
   no existe a partir de 900px (ahí manda .mde-nav, que no se toca). */
.mde-drawer__sub li:last-child a {
    font-weight: 700;
    color: var(--ink-2);
}

.mde-drawer__sub a:focus-visible { color: var(--accent); }

@media (hover: hover) {
    .mde-drawer__sub a:hover { color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
    .mde-nav__sub, .mde-nav__caret { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARRUSEL DE TESTIMONIOS
   ───────────────────────────────────────────────────────────────────────────
   Cinta continua en CSS: la pista se duplica y se desplaza exactamente el 50 %
   de su ancho, así el corte cae donde empieza la copia y el bucle no se ve.
   El juego duplicado va con aria-hidden para que un lector de pantalla no lea
   veinte testimonios donde hay diez.

   Con prefers-reduced-motion no hay animación: la cinta pasa a ser una zona
   de desplazamiento horizontal normal, que sigue siendo usable.

   Sin fotos. Los avatares son iniciales sobre color, dibujadas con CSS: son
   ochenta caras que habría que subir, recortar y servir, y no aportan nada
   que el nombre no diga ya.
   ═══════════════════════════════════════════════════════════════════════════ */

.mde-testi {
    position: relative;
    overflow: hidden;
    padding: .5rem 0;
    /* Difumina los bordes para que las tarjetas entren y salgan sin cortarse en seco */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.mde-testi__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: mde-testi-run 78s linear infinite;
}

.mde-testi:focus-within .mde-testi__track { animation-play-state: paused; }

@media (hover: hover) {
    .mde-testi:hover .mde-testi__track { animation-play-state: paused; }
}

@keyframes mde-testi-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.mde-testi__card {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.125rem;
    padding: 1.375rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.mde-testi__card p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.mde-testi__who { display: flex; align-items: center; gap: .75rem; }

.mde-testi__av {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent-ink, #060a13);
    background: var(--accent);
}

/* Seis tonos para que la fila no sea una sola mancha de color */
.mde-testi__av--b { background: #34d399; }
.mde-testi__av--c { background: #fbbf24; }
.mde-testi__av--d { background: #f472b6; }
.mde-testi__av--e { background: #38bdf8; }
.mde-testi__av--f { background: #a78bfa; }

.mde-testi__name { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mde-testi__name b { font-size: .8125rem; font-weight: 600; color: var(--ink); }

.mde-testi__name span {
    font-size: .75rem;
    line-height: 1.35;
    color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
    .mde-testi { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .mde-testi__track { animation: none; }
}

@media (max-width: 40rem) {
    .mde-testi__card { flex-basis: 16.5rem; }
    .mde-testi__track { animation-duration: 58s; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVITACIÓN A DEJAR OPINIÓN EN GOOGLE
   ───────────────────────────────────────────────────────────────────────────
   Sustituye a la prueba social hasta que haya testimonios reales. Sin estrellas
   dibujadas a propósito: una fila de cinco estrellas sin una nota detrás se lee
   como una valoración que no tenemos.

   Los estilos .mde-testi de más arriba quedan sin usar por ahora. Se conservan
   porque el carrusel vuelve en cuanto lleguen las opiniones auténticas; son
   unos 400 bytes tras Brotli.
   ═══════════════════════════════════════════════════════════════════════════ */

.mde-review {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}

.mde-review__icon {
    flex: none;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink, #060a13);
}

.mde-review__icon svg { width: 1.5rem; height: 1.5rem; }

.mde-review__body { flex: 1 1 20rem; display: flex; flex-direction: column; gap: .5rem; }

.mde-review__body h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--ink);
}

.mde-review__body p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }

.mde-review__note {
    font-size: .8125rem !important;
    color: var(--ink-3) !important;
    padding-top: .25rem;
}

.mde-review__cta { flex: none; }

@media (max-width: 48rem) {
    .mde-review { flex-direction: column; align-items: flex-start; }
    .mde-review__cta { width: 100%; }
    .mde-review__cta .mde-cta { width: 100%; justify-content: center; }
}
