/* ============================================================================
   Portada de la DEMO — `/demo`   ·   REDISEÑO "Carpeta abierta"
   ----------------------------------------------------------------------------
   Namespace: `dmo-`  (DeMO). Exclusivo de esta vista: no lo usa ningún otro
   módulo (verificado antes de crearlo).

   TESIS. No son dos roles enfrentados: son DOS HOJAS DE UN MISMO EXPEDIENTE.
   El diseño anterior dibujaba dos tarjetas gemelas, separadas y del mismo
   color, mientras el titular prometía "un mismo cuidado" — la composición
   contradecía al texto. Aquí hay UN SOLO objeto con un pliegue compartido: la
   hoja de la profesional (más ancha, primero: es quien decide) y la hoja de su
   paciente. Cada hoja enseña un fragmento REAL de la interfaz, porque a una
   profesional escéptica una pantalla la convence más que un adjetivo.

   PÁGINA STANDALONE. No carga el shell admin (`app.css`). Se sirve con
   `@cssAsset` y cache-bust por mtime — media queries CRUDAS, NO pasa por el
   build PostCSS, igual que `landing.css` y `seguridad-privacidad.css`.
   => Tocar este archivo NO obliga a `npm run minify:css`.

   PALETA. Tokens locales `--dmo-*` anclados a la escala canónica de
   `app.css :root` (--primary / --teal-* / --bg-* / --text-*). Se ancla al TEAL
   CANÓNICO a propósito y NO al `$primary` del branding global: ese puede ser
   otro color (p.ej. azul) y descuadraría la identidad de la portada comercial.
   Decisión heredada del diseño anterior, conservada de forma explícita.

   RENDIMIENTO. Cero `filter: blur()` (el diseño viejo tenía dos manchas fijas
   de ~750px con blur(70px) repintándose en el scroll). El ambiente se pinta con
   degradados. Se anima SOLO `transform` y `opacity`. Sin librerías.

   MOVIMIENTO. Un solo momento autoral: la carpeta SE ABRE una vez al cargar.
   El pliegue no se mueve nunca — es lo único que las hojas comparten. Todo se
   apaga con `prefers-reduced-motion`, y el estado base es visible: si la
   animación no corre, la página se ve completa igual.

   WEBKIT. Respaldo plano ANTES de cualquier `color-mix()`; alturas en `dvh`;
   sin `:has()` ni `backdrop-filter` como soporte de nada.
   ========================================================================== */

:root {
    /* Marca — teal canónico (ver nota de PALETA arriba). */
    --dmo-primary:      #199c82;   /* --primary   / --teal-500 */
    --dmo-primary-600:  #168a73;   /* --teal-600 */
    --dmo-primary-700:  #116d5b;   /* --teal-700  / --primary-dark */
    --dmo-primary-800:  #0d4239;   /* --teal-800 */
    --dmo-primary-050:  #e6f7f3;   /* --primary-light */
    --dmo-primary-rgb:  25, 156, 130;

    /* Superficie y texto — escala slate canónica. */
    --dmo-bg:        #f8fafc;      /* --bg-body */
    --dmo-card:      #ffffff;      /* --bg-card */
    --dmo-card-soft: #fbfdfc;
    --dmo-ink:       #0f172a;      /* --text-primary */
    --dmo-ink-2:     #475569;      /* --text-secondary */
    --dmo-ink-3:     #64748b;
    --dmo-faint:     #94a3b8;      /* --text-muted */
    --dmo-line:      #e2e8f0;      /* --border */
    --dmo-line-2:    #eef2f5;
    --dmo-line-3:    #cbd5e1;
    --dmo-chip:      #f1f5f9;

    /* Acento de la racha del paciente (semántico --warning-ink / --warning-bg). */
    --dmo-streak-ink: #854d0e;
    --dmo-streak-bg:  #fdf4e3;

    /* Forma y elevación. */
    --dmo-r-sm:  6px;
    --dmo-r:     10px;
    --dmo-r-lg:  18px;
    --dmo-pill:  999px;
    --dmo-sh-sm: 0 1px 3px rgba(15, 23, 42, .05);
    --dmo-sh-md: 0 12px 26px -14px rgba(25, 156, 130, .85);
    --dmo-sh-lg: 0 30px 70px -40px rgba(9, 40, 33, .32), 0 2px 6px -3px rgba(15, 23, 42, .06);

    /* Movimiento. */
    --dmo-ease:  cubic-bezier(.2, .7, .3, 1);
    --dmo-t:     200ms cubic-bezier(.4, 0, .2, 1);

    /* Mínimo tocable (WCAG 2.5.5). */
    --dmo-touch: 44px;

    --dmo-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;
}

/* ─── Reset acotado a la página ──────────────────────────────────────────── */
.dmo-page *,
.dmo-page *::before,
.dmo-page *::after { box-sizing: border-box; }

.dmo-page {
    margin: 0;
    padding: 0;
    font-family: var(--dmo-font);
    color: var(--dmo-ink);
    background: var(--dmo-bg);
    /* Ambiente pintado (sin filtros de compositor). */
    background-image:
        radial-gradient(115% 62% at 50% -14%, var(--dmo-primary-050), rgba(230, 247, 243, 0) 62%),
        radial-gradient(80% 44% at 92% 104%, rgba(25, 156, 130, .07), rgba(25, 156, 130, 0) 60%);
    background-repeat: no-repeat;
    background-attachment: scroll;   /* `fixed` no funciona en iOS */
    min-height: 100vh;
    min-height: 100dvh;              /* la barra de Safari cambia la altura */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* OJO: las listas NO entran en este reset. `.dmo-page ul` tendría más
   especificidad (0,1,1) que `.dmo-chips` / `.dmo-guard` (0,1,0) y les mataría
   el `margin-top` — la franja de garantías quedaba pegada a la carpeta. Cada
   lista se resetea a sí misma en su propia regla. */
.dmo-page h1,
.dmo-page h2,
.dmo-page p { margin: 0; padding: 0; }

/* Superficies del navegador: selección, foco y caret salen de la paleta. */
.dmo-page ::selection { background: rgba(var(--dmo-primary-rgb), .20); color: var(--dmo-ink); }
.dmo-page { accent-color: var(--dmo-primary); }
.dmo-page :focus-visible {
    outline: 3px solid rgba(var(--dmo-primary-rgb), .55);
    outline-offset: 3px;
    border-radius: var(--dmo-r-sm);
}

/* ─── Estructura ─────────────────────────────────────────────────────────── */
.dmo-shell {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: clamp(22px, 3.6vw, 42px) clamp(16px, 4vw, 32px)
             calc(clamp(26px, 4vw, 46px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ─── Cabecera ───────────────────────────────────────────────────────────── */
.dmo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: clamp(26px, 4.4vw, 46px);
}
.dmo-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.dmo-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    flex: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--dmo-primary);
    background: linear-gradient(140deg, var(--dmo-primary), var(--dmo-primary-800));
    box-shadow: 0 6px 16px -8px rgba(var(--dmo-primary-rgb), .8),
                inset 0 1px 0 rgba(255, 255, 255, .24);
}
.dmo-brand__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmo-brand__mark svg { width: 19px; height: 19px; }

/* Con logo REAL: el contenedor deja de pintar el gradiente teal. La imagen de
   marca es clara y con `cover` tapaba el gradiente entero — el resultado era
   una marca lavada e ilegible a 36px. Superficie neutra + `contain` para que
   el logo se vea completo y con contraste. El gradiente queda solo para el
   escudo SVG de respaldo (cuando no hay logo cargado). */
.dmo-brand__mark--img {
    background: var(--dmo-card);
    border: 1px solid var(--dmo-line);
    box-shadow: var(--dmo-sh-sm);
    padding: 3px;
}
.dmo-brand__mark--img img { object-fit: contain; border-radius: 8px; }
.dmo-brand__name {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--dmo-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dmo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--dmo-primary-700);
    background: var(--dmo-primary-050);
    border: 1px solid rgba(var(--dmo-primary-rgb), .22);
    padding: 6px 13px;
    border-radius: var(--dmo-pill);
    white-space: nowrap;
}
.dmo-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dmo-primary);
    flex: none;
}

/* ─── Titular ────────────────────────────────────────────────────────────── */
.dmo-intro {
    text-align: center;
    max-width: 620px;
    margin: 0 auto clamp(24px, 3.6vw, 38px);
}
.dmo-intro h1 {
    font-size: clamp(28px, 5.2vw, 44px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--dmo-ink);
    text-wrap: balance;
}
.dmo-intro h1 em { font-style: normal; color: var(--dmo-primary); }
.dmo-intro p {
    margin-top: 13px;
    font-size: clamp(14.6px, 1.5vw, 15.6px);
    line-height: 1.6;
    color: var(--dmo-ink-2);
}

/* Cifras reales del sandbox: prueba de que el consultorio está poblado.
   Se separan con un punto medio dibujado por CSS (no un carácter en el HTML),
   así el lector de pantalla lee "6 pacientes, 16 notas" sin ruido. */
.dmo-stats {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    font-size: 13px;
    color: var(--dmo-ink-3);
}
.dmo-stats li {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.dmo-stats li + li::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--dmo-line-3);
    transform: translateY(-50%);
}
.dmo-stats b {
    font-weight: 700;
    color: var(--dmo-primary-700);
    font-variant-numeric: tabular-nums;
}

/* ─── La carpeta ─────────────────────────────────────────────────────────── */
.dmo-folder {
    background: var(--dmo-card);
    border: 1px solid var(--dmo-line);
    border-radius: var(--dmo-r-lg);
    box-shadow: var(--dmo-sh-lg);
    display: grid;
    grid-template-columns: 1.28fr 1px 1fr;   /* la hoja de la profesional manda */
    overflow: hidden;
    /* La perspectiva vive en el contenedor para que la apertura sea de UN objeto. */
    perspective: 1400px;
}

/* El pliegue: lo único compartido. NO se mueve nunca. */
.dmo-fold {
    position: relative;
    background: linear-gradient(180deg,
        rgba(203, 213, 225, 0), var(--dmo-line-3) 12%,
        var(--dmo-line-3) 88%, rgba(203, 213, 225, 0));
}
.dmo-fold::before,
.dmo-fold::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    pointer-events: none;
}
.dmo-fold::before { right: 100%; background: linear-gradient(90deg,  rgba(15, 23, 42, 0), rgba(15, 23, 42, .045)); }
.dmo-fold::after  { left:  100%; background: linear-gradient(270deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .045)); }

/* ─── Cada hoja ──────────────────────────────────────────────────────────── */
.dmo-leaf {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.4vw, 28px) clamp(18px, 2.2vw, 24px);
    text-decoration: none;
    color: inherit;
    background: var(--dmo-card);
    transform-origin: center left;
    transition: background var(--dmo-t), transform 260ms var(--dmo-ease);
}
.dmo-leaf--patient { transform-origin: center right; }
.dmo-leaf:hover { background: var(--dmo-card-soft); }
.dmo-leaf:focus-visible { outline-offset: -3px; }

.dmo-leaf h2 {
    font-size: clamp(19px, 2.1vw, 22px);
    font-weight: 700;
    letter-spacing: -.024em;
    line-height: 1.18;
    color: var(--dmo-ink);
}
.dmo-leaf__desc {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.58;
    color: var(--dmo-ink-3);
}

/* Fragmento REAL de producto — la prueba, no un adorno. */
.dmo-frag {
    margin-top: 16px;
    border: 1px solid var(--dmo-line);
    border-radius: var(--dmo-r);
    background: var(--dmo-card-soft);
    padding: 13px;
}
.dmo-frag__head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.dmo-frag--note .dmo-frag__head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dmo-line-2);
    margin-bottom: 10px;
}
.dmo-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: var(--dmo-primary-700);   /* mismo motivo AA que el CTA */
}
.dmo-frag__who {
    font-size: 12.6px;
    font-weight: 600;
    color: var(--dmo-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dmo-frag__when {
    margin-left: auto;
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    /* NO `--dmo-faint` (= --text-muted): da 2.51:1 sobre la tarjeta y esto es
       texto real que se lee, no adorno. La escala canónica reserva el muted
       para terciario no esencial. */
    color: var(--dmo-ink-3);
    font-variant-numeric: tabular-nums;   /* las fechas alinean */
}
.dmo-frag__lines { display: flex; flex-direction: column; gap: 6px; }
.dmo-frag--mood .dmo-frag__lines { margin-top: 11px; }
.dmo-frag__lines i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #e8eef2;
}
.dmo-frag__tag {
    display: inline-block;
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--dmo-primary-700);
    background: var(--dmo-primary-050);
    border-radius: var(--dmo-r-sm);
    padding: 3px 8px;
}
.dmo-mood__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    background: radial-gradient(circle at 35% 32%, #7fe3c8, var(--dmo-primary));
}
.dmo-mood__text { min-width: 0; }
.dmo-mood__text b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dmo-ink);
}
.dmo-mood__text span {
    display: block;
    font-size: 11px;
    color: var(--dmo-ink-3);   /* mismo criterio que `.dmo-frag__when` */
    font-variant-numeric: tabular-nums;
}
.dmo-streak {
    margin-left: auto;
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--dmo-streak-ink);
    background: var(--dmo-streak-bg);
    border-radius: var(--dmo-r-sm);
    padding: 3px 8px;
    white-space: nowrap;
}

.dmo-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
}
.dmo-chips li {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dmo-ink-2);
    background: var(--dmo-chip);
    border: 1px solid var(--dmo-line);
    border-radius: var(--dmo-pill);
    padding: 4px 10px;
}

/* La acción vive al borde inferior de la hoja, como una pestaña de archivo. */
.dmo-cta {
    margin-top: auto;
    padding-top: 18px;
}
.dmo-cta span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--dmo-touch);
    padding: 12px 16px;
    border-radius: var(--dmo-r);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    /* Sin `box-shadow` en la transición: la sombra no cambia en hover, así que
       era una propiedad muerta que además obliga a repintar (CLAUDE.md R6). */
    transition: background var(--dmo-t), border-color var(--dmo-t),
                transform 120ms var(--dmo-ease);
}
/* Fondo en `--teal-700`, NO en `--teal-500`: blanco sobre #199c82 da 3.43 y AA
   pide 4.5 (el texto es 14.5px, no califica como "grande"); sobre #116d5b da
   6.24. Mismo criterio que el botón primario de la landing pública. */
.dmo-leaf--pro .dmo-cta span {
    color: #fff;
    background: var(--dmo-primary-700);
    box-shadow: var(--dmo-sh-md);
}
.dmo-leaf--pro:hover .dmo-cta span { background: var(--dmo-primary-800); }
/* La hoja del paciente pesa IGUAL que la del panel. La página propone dos
   puertas equivalentes («Dos hojas del mismo expediente. Elegí cuál abrir»), y
   con una sólida y la otra en contorno se leía una jerarquía que el copy no
   pide: empujaba al visitante hacia el panel. Las hojas se siguen distinguiendo
   por todo lo demás — icono, título, chips y la miniatura de su contenido.
   Mismo `--dmo-primary-700` (6.24 sobre blanco): la nota de contraste de arriba
   vale para ambas. */
.dmo-leaf--patient .dmo-cta span {
    color: #fff;
    background: var(--dmo-primary-700);
    box-shadow: var(--dmo-sh-md);
}
.dmo-leaf--patient:hover .dmo-cta span { background: var(--dmo-primary-800); }
.dmo-leaf:active .dmo-cta span { transform: translateY(1px); }
.dmo-cta svg { width: 16px; height: 16px; flex: none; }

/* ─── Garantías: convierten el miedo en permiso ──────────────────────────── */
.dmo-guard {
    list-style: none;
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    background: var(--dmo-card);
    border: 1px solid var(--dmo-line);
    border-radius: var(--dmo-r);
    padding: 11px 15px;
    box-shadow: var(--dmo-sh-sm);
}
.dmo-guard li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.6px;
    color: var(--dmo-ink-2);
}
.dmo-guard svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--dmo-primary);
}

/* ─── Pie ────────────────────────────────────────────────────────────────── */
.dmo-foot {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}
.dmo-sec {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: var(--dmo-touch);
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dmo-primary-700);
    text-decoration: none;
    transition: color var(--dmo-t);
}
.dmo-sec__label {
    border-bottom: 1px solid rgba(17, 109, 91, .3);
    padding-bottom: 2px;
    transition: border-color var(--dmo-t);
}
.dmo-sec:hover { color: var(--dmo-primary); }
.dmo-sec:hover .dmo-sec__label { border-color: var(--dmo-primary); }
.dmo-sec svg { width: 15px; height: 15px; flex: none; }
.dmo-sec__out { width: 12px; height: 12px; opacity: .6; }

/* ══ MOVIMIENTO ══════════════════════════════════════════════════════════
   Un solo momento autoral: la carpeta se abre. El estado BASE es visible —
   si la animación no corre (reduced-motion, CSS a medio cargar), la página se
   ve completa igual. Solo `transform` y `opacity`.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .dmo-top,
    .dmo-intro,
    .dmo-guard,
    .dmo-foot { animation: dmo-in 620ms var(--dmo-ease) both; }
    .dmo-intro { animation-delay: 70ms; }
    .dmo-guard { animation-delay: 340ms; }
    .dmo-foot  { animation-delay: 400ms; }

    /* La apertura: las hojas nacen plegadas hacia el pliegue y se asientan. */
    .dmo-leaf--pro     { animation: dmo-open-left  700ms var(--dmo-ease) 130ms both; }
    .dmo-leaf--patient { animation: dmo-open-right 700ms var(--dmo-ease) 190ms both; }
    .dmo-fold          { animation: dmo-seam 520ms var(--dmo-ease) 90ms both; }

    /* La hoja se levanta apenas al considerarla; la otra nunca se apaga. */
    .dmo-leaf:hover,
    .dmo-leaf:focus-visible { transform: translateY(-2px); }
}

@keyframes dmo-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes dmo-open-left {
    from { opacity: 0; transform: rotateY(6deg)  translateX(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes dmo-open-right {
    from { opacity: 0; transform: rotateY(-6deg) translateX(-10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes dmo-seam {
    from { opacity: 0; transform: scaleY(.35); }
    to   { opacity: 1; transform: none; }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

/* Tablet 11" vertical y por debajo: la carpeta se apila y el pliegue pasa a
   ser una COSTURA HORIZONTAL. Las dos hojas siguen siendo un solo objeto —
   sin esto la metáfora se perdería justo en el ancho donde más se ve. */
@media (max-width: 860px) {
    .dmo-folder { grid-template-columns: 1fr; }

    .dmo-fold {
        height: 1px;
        background: linear-gradient(90deg,
            rgba(203, 213, 225, 0), var(--dmo-line-3) 10%,
            var(--dmo-line-3) 90%, rgba(203, 213, 225, 0));
    }
    .dmo-fold::before,
    .dmo-fold::after {
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 14px;
    }
    .dmo-fold::before { bottom: 100%; background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .045)); }
    .dmo-fold::after  { top: 100%;    background: linear-gradient(0deg,   rgba(15, 23, 42, 0), rgba(15, 23, 42, .045)); }

    /* Apilado, la apertura es vertical: no hay izquierda ni derecha. */
    @media (prefers-reduced-motion: no-preference) {
        .dmo-leaf--pro     { animation-name: dmo-in; }
        .dmo-leaf--patient { animation-name: dmo-in; }
        .dmo-fold          { animation-name: dmo-in; }
    }
}

@media (max-width: 560px) {
    .dmo-shell { padding-top: 18px; }
    .dmo-top { margin-bottom: 22px; }
    .dmo-folder { border-radius: 14px; }
    .dmo-intro { margin-bottom: 20px; }
    .dmo-guard {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }
    .dmo-frag__when { font-size: 10px; }
}

/* Móvil chico (360): el badge y la marca compiten por el renglón. */
@media (max-width: 400px) {
    .dmo-top { gap: 10px; }
    .dmo-badge { font-size: 10.5px; padding: 5px 11px; letter-spacing: .09em; }
    .dmo-brand__mark { width: 32px; height: 32px; border-radius: 10px; }
}

/* Landscape bajo (móvil acostado): que quepa sin obligar a scrollear de más. */
@media (max-height: 560px) and (orientation: landscape) {
    .dmo-shell { min-height: 0; }
    .dmo-intro { margin-bottom: 18px; }
    .dmo-intro h1 { font-size: clamp(24px, 3.4vw, 32px); }
}

/* Punteros gruesos (dedo): áreas tocables reales. */
@media (pointer: coarse) {
    .dmo-cta span { min-height: 48px; }
    .dmo-sec { min-height: 48px; }
}