/* ============================================================
 * MIMETIZER — estilos propios (identidad pino/menta, cero violeta)
 * Se carga ÚLTIMO, después del CSS del portal (verbatim, no tocar).
 * Secciones: 1. Vars · 2. Hero · 3. Demo · 4. Planes · 5. Switcher
 * ============================================================ */

/* ---------- 1. VARS ---------- */
:root {
    --color-1: #0b3d36;
    --color-2: #0e7c66;
    --color-3: #34d399;
    --color-4: #06110f;
    --color-5: #a7f3d0;
    --color-5-strong: #34d399;
    --landing-ink: #102622;
    --landing-paper: #f2f6f1;
    --landing-line: rgba(11, 61, 54, 0.14);
}

/* Los iconos Remix son glifos de fuente: la negrita heredada de los
 * botones los difumina (faux bold). Siempre en peso normal. */
.landing-page i[class*="ri-"] { font-weight: 400; }

/* ---------- 2. HERO (mismo layout Atlas, nueva luz) ---------- */
.atlas-hero {
    background:
        radial-gradient(circle at 85% 10%, rgba(52, 211, 153, 0.22), transparent 32%),
        radial-gradient(circle at 12% 88%, rgba(45, 212, 191, 0.18), transparent 30%),
        var(--color-1);
}

.atlas-hero::after {
    background: radial-gradient(ellipse 72% 62% at 50% 42%, rgba(4, 20, 17, 0.62), transparent 70%);
}

.atlas-orb--one { background: rgba(52, 211, 153, 0.45); }
.atlas-orb--two { background: rgba(45, 212, 191, 0.35); }
.atlas-badge img { filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.55)); }

/* Sin grid: el ::before de atlas.css dibuja la grilla del hero (verbatim del
 * portal, no se toca). Acá se apaga en TODO el sitio: olas + orbes + velo
 * alcanzan. (En login.css queda el override específico de .mz-auth.) */
.atlas-hero::before {
    display: none;
}

/* GradientWaves (React Bits): el contenedor es el canvas del hero */
.gradient-waves-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.mz-waves canvas { opacity: 0.95; }

/* ---------- 3. DEMO (violetas hardcodeados de atlas.css -> pino/teal) ---------- */
.atlas-real { box-shadow: 0 30px 70px rgba(11, 61, 54, 0.14); }
.atlas-real-header { background: linear-gradient(135deg, rgba(11, 61, 54, 0.06), transparent); }

/* Logo oficial (blanco, sin fondo): no se recolorea, solo sombra */
.mimetizer-logo,
.atlas-badge img,
.atlas-real-logo,
.mzc-avatar > img,
.mz-auth-logo img {
    filter: drop-shadow(0 2px 10px rgba(6, 17, 15, 0.45));
}

/* Fondos claros: pastilla pino para que el blanco se lea */
.atlas-real-header-info img.atlas-real-logo {
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    border-radius: 14px;
    padding: 6px;
}

.mzc-row.assistant .mzc-avatar {
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    border-color: transparent;
}

.atlas-real-new-chat-btn { box-shadow: 0 2px 8px rgba(11, 61, 54, 0.2); }
.atlas-real-new-chat-btn:hover { box-shadow: 0 4px 12px rgba(11, 61, 54, 0.25); }
.atlas-real-sidebar { border-right-color: rgba(11, 61, 54, 0.12); }
.atlas-real-conv-btn:hover { background: rgba(14, 124, 102, 0.07); }
.atlas-real-conv-btn.active { background: rgba(14, 124, 102, 0.1); border-color: rgba(11, 61, 54, 0.16); }
.atlas-real-sidebar-foot { border-top-color: rgba(11, 61, 54, 0.12); }
.atlas-real-messages {
    background:
        radial-gradient(ellipse at top right, rgba(11, 61, 54, 0.06), transparent 55%),
        var(--white);
}
.atlas-real-messages::-webkit-scrollbar-thumb { background: rgba(11, 61, 54, 0.2); }
.asistente-msg-row.assistant .asistente-msg-avatar { background: rgba(14, 124, 102, 0.1); border-color: rgba(11, 61, 54, 0.14); }
.asistente-msg-row.assistant .asistente-msg-bubble { background: #edf4ef; border-color: rgba(11, 61, 54, 0.12); }
.atlas-real-suggestion { border-color: rgba(11, 61, 54, 0.16); background: #edf4ef; }
.atlas-real-suggestion:hover { background: rgba(14, 124, 102, 0.12); }
.atlas-real-composer { border-top-color: rgba(11, 61, 54, 0.12); background: #f6faf8; }
.atlas-real-composer-inner { border-color: rgba(11, 61, 54, 0.2); }
.atlas-real-composer-inner:focus-within { box-shadow: 0 0 0 3px rgba(11, 61, 54, 0.1); }
.atlas-real-send-btn { box-shadow: 0 2px 8px rgba(11, 61, 54, 0.24); }
.atlas-real-send-btn:hover { box-shadow: 0 4px 12px rgba(11, 61, 54, 0.3); }

/* Pill de versión del demo ("mimic 87%") */
.atlas-real-version {
    background: rgba(14, 124, 102, 0.1);
    border-color: rgba(14, 124, 102, 0.25);
}

/* Badge EN VIVO: punto verde pulsante (demo.js lo activa con .is-live) */
.atlas-real-version.is-live {
    background: rgba(52, 211, 153, 0.18);
    border-color: rgba(52, 211, 153, 0.5);
    color: var(--color-1);
}

.mz-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--color-3);
    animation: mz-live-pulse 1.8s ease-in-out infinite;
    vertical-align: baseline;
}

@keyframes mz-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

/* Entrada de mensajes + meta pill en la demo */
.asistente-msg-row { animation: mz-msg-in 0.28s ease-out; }

@keyframes mz-msg-in {
    from { opacity: 0; transform: translateY(8px); }
}

.mimetizer-msg-meta {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(14, 124, 102, 0.1);
    color: var(--color-1);
    font-size: 0.68rem;
    font-weight: var(--bold);
}

@media (prefers-reduced-motion: reduce) {
    .asistente-msg-row { animation: none; }
    .mz-live-dot { animation: none; }
}

/* ---------- 10. DEMO CHAT (WhatsApp/Intercom: burbujas, ticks, presencia) ---------- */
/* Panel héroe: el chat manda en la sección */
.atlas-demo-panel { max-width: 1080px; margin-left: auto; margin-right: auto; }

.atlas-demo-panel .atlas-real {
    border-radius: 24px;
    border: 1px solid rgba(11, 61, 54, 0.14);
    box-shadow:
        0 30px 70px rgba(11, 61, 54, 0.16),
        0 0 0 6px rgba(52, 211, 153, 0.06);
    overflow: hidden;
}

.atlas-real-header { padding: 1rem 1.25rem; }

.atlas-real-header-info img.atlas-real-logo { width: 46px; height: 46px; }

.atlas-real-header-info h2 { font-size: 1.05rem; }
/* Scroll INTERNO garantizado: la cadena flex necesita min-height:0 o el
 * contenido empuja la página y el chat nunca scrollea adentro. */
.atlas-real-shell { min-height: 0; }
.atlas-real-chat-panel.mzc { display: flex; flex-direction: column; min-height: 0; }

.mzc-log {
    /* Fondo de chat con patrón de marca (estilo WhatsApp): doodles pino
     * sutiles — burbuja, carita beam, hoja menta, spark, ondas de voz.
     * Mismo tile en mimetizer.js .mz-w-log: cambiar en los dos lados. */
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='none' stroke='%230b3d36' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.08'><path d='M22 22h18a7 7 0 0 1 7 7v8a7 7 0 0 1-7 7h-9l-8 6v-6a7 7 0 0 1-8-7v-8a7 7 0 0 1 7-7z'/><circle cx='98' cy='31' r='1.4' fill='%230b3d36' stroke='none'/><circle cx='109' cy='31' r='1.4' fill='%230b3d36' stroke='none'/><path d='M95.5 37q8 5.2 16 0'/><path d='M28 104Q40 90 52 104Q40 118 28 104Z'/><path d='M32 104Q40 97.5 48 104'/><path d='M110 82c.5 3.8 3.2 6.5 7 7-3.8.5-6.5 3.2-7 7-.5-3.8-3.2-6.5-7-7 3.8-.5 6.5-3.2 7-7z'/><path d='M64 125v5M68 121v13M72 125v5'/><circle cx='72' cy='60' r='1.1' fill='%230b3d36' stroke='none'/><circle cx='127' cy='53' r='1.1' fill='%230b3d36' stroke='none'/><circle cx='16' cy='127' r='1.1' fill='%230b3d36' stroke='none'/></g></svg>"),
        radial-gradient(ellipse at top right, rgba(11, 61, 54, 0.05), transparent 55%),
        #f6faf8;
    padding: 1.25rem 1.1rem;
    flex: 1 1 auto;
    min-height: 440px;
    max-height: min(600px, 64vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.mzc-log::-webkit-scrollbar { width: 8px; }
.mzc-log::-webkit-scrollbar-thumb { background: rgba(11, 61, 54, 0.25); border-radius: 8px; }
.mzc-log::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 640px) {
    .mzc-log { min-height: 300px; max-height: 68vh; }
}

.mzc-day {
    width: max-content;
    margin: 0 auto 0.9rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: rgba(11, 61, 54, 0.1);
    color: var(--color-1);
    font-size: 0.7rem;
    font-weight: var(--bold);
    letter-spacing: 0.04em;
}

.mzc-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    animation: mz-msg-in 0.28s ease-out;
}

.mzc-row.user { flex-direction: row-reverse; }

.mzc-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: visible;
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(16, 38, 34, 0.15);
}

.mzc-row.assistant .mzc-avatar { background: var(--white); border: 1px solid rgba(11, 61, 54, 0.14); }
.mzc-row.assistant .mzc-avatar > img { width: 22px; height: 22px; display: block; }
.mzc-row.user .mzc-avatar { background: linear-gradient(135deg, var(--color-1), var(--color-2)); color: var(--white); font-size: 1.1rem; }
/* Carita beam del Mimic como avatar: llena el círculo, fondo propio. */
.mzc-avatar.has-face { background: var(--white); border: 1px solid rgba(11, 61, 54, 0.14); overflow: hidden; }
.mzc-avatar.has-face > svg { width: 100%; height: 100%; display: block; border-radius: 50%; }

.mzc-main { max-width: 76%; display: flex; flex-direction: column; }
.mzc-row.user .mzc-main { align-items: flex-end; }

.mzc-name { font-size: 0.72rem; font-weight: var(--bold); color: var(--color-2); margin: 0 0.25rem 0.2rem; }
.mzc-row.user .mzc-name { color: var(--text); }

.mzc-bubble {
    position: relative;
    padding: 0.7rem 1rem 0.6rem;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 10px rgba(16, 38, 34, 0.08);
}

.mzc-row.assistant .mzc-bubble {
    background: var(--white);
    border: 1px solid rgba(11, 61, 54, 0.1);
    border-top-left-radius: 6px;
    color: var(--landing-ink);
}

.mzc-row.user .mzc-bubble {
    background: linear-gradient(135deg, var(--color-1) 0%, var(--color-2) 100%);
    border-top-right-radius: 6px;
    color: var(--white);
}

.mzc-foot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--text);
}

.mzc-row.user .mzc-foot { flex-direction: row-reverse; }

.mzc-ticks { font-size: 0.85rem; line-height: 1; color: rgba(255, 255, 255, 0.7); }
.mzc-ticks.is-read { color: #53bdeb; }

.mzc-why { font-size: 0.7rem; }
.mzc-why summary {
    display: inline-block;
    padding: 0.12rem 0.6rem;
    border-radius: 999px;
    background: rgba(14, 124, 102, 0.1);
    color: var(--color-1);
    font-weight: var(--bold);
    cursor: pointer;
    list-style: none;
}
.mzc-why summary::-webkit-details-marker { display: none; }
.mzc-why summary:hover { background: rgba(14, 124, 102, 0.18); }
.mzc-why div { margin-top: 0.25rem; color: var(--text); }

/* Typing: "escribiendo" + puntitos */
.mzc-typing { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem 0; }
.mzc-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-2);
    animation: mz-typing 1.1s ease-in-out infinite;
}
.mzc-typing span:nth-child(2) { animation-delay: 0.18s; }
.mzc-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes mz-typing {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

/* Chips de sugerencia */
.mzc-chips { gap: 0.45rem; }
.mzc-chips .atlas-real-suggestion {
    border-radius: 999px;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.mzc-chips .atlas-real-suggestion:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 61, 54, 0.14); }

/* Composer */
.mzc-box {
    align-items: flex-end;
    padding: 0.45rem 0.45rem 0.45rem 0.5rem;
    border-radius: 20px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.mzc-box:focus-within { box-shadow: 0 0 0 3px rgba(11, 61, 54, 0.12), 0 8px 24px rgba(11, 61, 54, 0.1); }

.mzc-box textarea {
    border: none;
    background: transparent;
    resize: none;
    max-height: 120px;
    font-size: 0.98rem;
    padding: 0.65rem 0.4rem;
}

.mzc-send {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(11, 61, 54, 0.3);
}
.mzc-send:hover:not(:disabled) { transform: scale(1.06); }
.mzc-send:disabled { opacity: 0.45; cursor: wait; }

.mzc-bar.is-waiting textarea { opacity: 0.6; }

/* Presencia en el header */
.mzc-online {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    font-size: 0.72rem;
    font-weight: var(--bold);
    color: var(--color-3);
}

.mzc-online .mzc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-3);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

@media (max-width: 560px) {
    .mzc-main { max-width: 88%; }
    .mzc-avatar { width: 28px; height: 28px; }
    .mzc-online { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mzc-row { animation: none; }
    .mzc-typing span { animation-duration: 2s; }
}

/* ---------- 11. DEMO: tags, adjuntos, sistema, composer pro ---------- */

/* Tags temáticos (preguntan de verdad, no solo actúan) */
.mzc-chips { gap: 0.5rem; padding-bottom: 0.2rem; }
.mzc-chips .atlas-real-suggestion { font-size: 0.85rem; padding: 0.5rem 1rem; }
.mzc-chips .atlas-real-suggestion::before { content: "#"; opacity: 0.55; margin-right: 0.15rem; }

/* Mensajes de sistema (divisores, takeover) */
.mzc-sys {
    width: max-content;
    max-width: 90%;
    margin: 0.55rem auto;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(11, 61, 54, 0.08);
    border: 1px dashed rgba(11, 61, 54, 0.25);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: var(--bold);
    text-align: center;
}

.mzc-sys.is-handoff { background: rgba(194, 65, 12, 0.08); border-color: rgba(194, 65, 12, 0.3); color: #9a3412; }
/* Traza de herramientas: borde lleno y punto menta para distinguirla de la
 * píldora de sistema (que marca eventos, no trabajo del Mimic). */
.mzc-sys.is-tool {
    border-style: solid;
    border-color: rgba(14, 124, 102, 0.28);
    background: rgba(14, 124, 102, 0.07);
    color: var(--color-1);
}
.mzc-sys.is-tool::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 0.4rem;
    border-radius: 999px;
    background: var(--color-5-strong);
    vertical-align: middle;
}

/* Humano que toma la conversación (takeover) */
.mzc-row.human .mzc-avatar { background: #b45309; color: var(--white); font-size: 1rem; }
.mzc-row.human .mzc-bubble { background: #fff7ed; border: 1px solid rgba(180, 83, 9, 0.25); border-top-left-radius: 4px; color: var(--landing-ink); }
.mzc-row.human .mzc-name { color: #b45309; }

/* Adjuntos del usuario */
.mzc-filecard {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 200px;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.mzc-filecard i { font-size: 1.6rem; }

.mzc-filecard .mzc-fname { font-size: 0.82rem; font-weight: var(--bold); overflow-wrap: anywhere; }
.mzc-filecard .mzc-fsize { font-size: 0.7rem; opacity: 0.75; }

.mzc-imgprev {
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    display: block;
}

/* Composer pro */
.mzc-box {
    align-items: flex-end;
    padding: 0.35rem 0.35rem 0.35rem 0.3rem;
    box-shadow: 0 4px 18px rgba(11, 61, 54, 0.08);
}

.mzc-attach {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.mzc-attach:hover { background: rgba(14, 124, 102, 0.1); color: var(--color-1); transform: rotate(-12deg); }

.mzc-empty {
    margin: auto;
    text-align: center;
    color: var(--text);
    font-size: 0.85rem;
    padding: 2rem 1rem;
}

.mzc-empty i { font-size: 2rem; color: var(--color-2); display: block; margin-bottom: 0.5rem; }

/* ---------- 12. CANAL DE ORIGEN (mismo componente de la Bandeja real) ---------- */
.mzc-chans { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; flex-wrap: wrap; }

.mzc-chan {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.9rem;
    border: 1px solid rgba(11, 61, 54, 0.2);
    border-radius: 999px;
    background: var(--white);
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: var(--bold);
    cursor: pointer;
    transition: all 0.15s;
}

.mzc-chan i { font-size: 1rem; }

.mzc-chan:hover { border-color: var(--color-2); color: var(--color-1); transform: translateY(-1px); }
.mzc-chan.is-active { background: var(--color-1); border-color: var(--color-1); color: var(--white); }

/* Insignia de canal sobre el avatar + en el pie */
.mzc-avatar { position: relative; }

.mzc-chanbadge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid rgba(11, 61, 54, 0.2);
    font-size: 0.6rem;
    line-height: 1;
}

.mzc-chanbadge.is-wa { color: #25d366; }
.mzc-chanbadge.is-ig { color: #e1306c; }
.mzc-chanbadge.is-web { color: var(--color-2); }

.mzc-foot .mzc-src { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; }
.mzc-foot .mzc-src.is-wa { color: #128c4b; }
.mzc-foot .mzc-src.is-ig { color: #c13572; }
.mzc-foot .mzc-src.is-web { color: var(--color-2); }

/* ---------- 3b. CAPS + CTA (violetas hardcodeados restantes) ---------- */
.atlas-cap:hover { box-shadow: 0 20px 46px rgba(11, 61, 54, 0.13); }

.atlas-cap-icon { background: rgba(14, 124, 102, 0.1); }

.atlas-cta-panel {
    background:
        radial-gradient(circle at 12% 20%, rgba(52, 211, 153, 0.26), transparent 34%),
        radial-gradient(circle at 88% 85%, rgba(45, 212, 191, 0.2), transparent 32%),
        var(--color-1);
}

/* Marca + persona switch + style card (componentes Mimetizer) */
.mimetizer-logo { width: 40px; height: 40px; display: block; }

.mimetizer-persona-switch { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Botonera del header demo: aire entre grupos y botones con padding real */
.atlas-real-header-actions {
    gap: 0.9rem;
    flex-wrap: wrap;
    row-gap: 0.7rem;
}

.mimetizer-persona-switch { padding: 0.15rem 0; }

.mimetizer-persona-btn { padding: 0.55rem 1rem; }

.mimetizer-persona-btn--talk { margin-left: 0.35rem; }

.atlas-real-new-chat-btn { white-space: nowrap; }

@media (max-width: 640px) {
    .mimetizer-persona-btn--talk { margin-left: 0; }
}

/* Dos modos: VER (voces de ejemplo) vs HABLAR (Mimic real) */
.mimetizer-persona-group {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.25rem;
    border: 1px solid rgba(11, 61, 54, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
}

.mimetizer-persona-group .mimetizer-persona-btn { border: none; background: transparent; }

.mimetizer-persona-group .mimetizer-persona-btn.active { background: var(--color-1); color: var(--white); }

.mimetizer-persona-btn--talk {
    border: 1px solid var(--color-3);
    background: rgba(52, 211, 153, 0.14);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

.mimetizer-persona-btn--talk.active {
    background: var(--color-1);
    border-color: var(--color-1);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
}

/* Modo HABLAR: composer destacado (es una conversación real, no un acting) */
.mzc-bar.is-talk .mzc-box {
    border-color: var(--color-3);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18), 0 8px 24px rgba(11, 61, 54, 0.1);
}

.mimetizer-persona-btn {
    cursor: pointer;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(11, 61, 54, 0.16);
    border-radius: var(--semiradius);
    background: #edf4ef;
    color: var(--color-1);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: var(--bold);
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.mimetizer-persona-btn.active { background: var(--color-1); color: var(--white); }

.mimetizer-style-card { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(11, 61, 54, 0.12); }
.mimetizer-style-card .atlas-real-sidebar-label { margin-bottom: 0.4rem; }

.mimetizer-style-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.3rem; color: var(--text); font-size: 0.75rem; line-height: 1.5; }
.mimetizer-style-list li { display: flex; gap: 0.4rem; align-items: flex-start; }
.mimetizer-style-list i { color: var(--color-2); font-size: 0.9rem; }

.mimetizer-style-prompt {
    margin: 0;
    padding: 0.5rem 0.6rem;
    background: #edf4ef;
    border: 1px dashed rgba(11, 61, 54, 0.25);
    border-radius: var(--radius-m);
    color: var(--text);
    font-size: 0.72rem;
    line-height: 1.5;
}

.mimetizer-msg-meta { margin-top: 0.3rem; color: var(--text); font-size: 0.68rem; }

/* ---------- 4. PLANES (diseño propio, reemplaza taurus) ---------- */
.mz-plans { background: var(--white); }

.mz-plans > .wrapper {
    width: var(--container-width);
    max-width: 1180px;
    margin: 0 auto;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mz-plans-grid { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

.mz-plan {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.8rem;
    border: 1px solid var(--landing-line);
    border-radius: calc(var(--radius) * 1.4);
    background: var(--white);
    box-shadow: 0 10px 28px rgba(16, 38, 34, 0.05);
    text-align: left;
}

.mz-plan--featured {
    background:
        radial-gradient(circle at 90% 0%, rgba(52, 211, 153, 0.18), transparent 45%),
        var(--color-1);
    border-color: var(--color-1);
    color: var(--white);
    box-shadow: 0 24px 60px rgba(11, 61, 54, 0.3);
}

.mz-plan-badge {
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(11, 61, 54, 0.08);
    border: 1px solid var(--landing-line);
    color: var(--color-1);
    font-size: 0.7rem;
    font-weight: var(--bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mz-plan--featured .mz-plan-badge { background: var(--color-3); border-color: var(--color-3); color: var(--color-1); }

.mz-plan h3 { margin: 0; color: var(--landing-ink); font-size: 1.25rem; }
.mz-plan--featured h3 { color: var(--white); }

.mz-plan-desc { margin: 0; color: var(--text); font-size: 0.88rem; }
.mz-plan--featured .mz-plan-desc { color: rgba(255, 255, 255, 0.75); }

.mz-plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9rem; }
.mz-plan-features li { display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.5; }
.mz-plan-features i { color: var(--color-2); font-size: 1.05rem; }
.mz-plan--featured .mz-plan-features i { color: var(--color-3); }

.mz-plan-foot { margin: auto 0 0; padding-top: 0.9rem; border-top: 1px solid var(--landing-line); color: var(--text); font-size: 0.8rem; font-weight: var(--bold); }
.mz-plan--featured .mz-plan-foot { border-top-color: rgba(255, 255, 255, 0.16); color: var(--color-5); }

/* ---------- 5. SELECTOR DE IDIOMA (dropdown custom) ---------- */
.mz-login-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: var(--bold);
    text-decoration: none;
    white-space: nowrap;
}

.mz-login-link:hover { color: var(--white); text-decoration: underline; }

.mz-lang { position: relative; }

.mz-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: var(--white);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: var(--bold);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.mz-lang-btn:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }

.mz-lang-btn > i { font-size: 1rem; }

.mz-lang-btn .ri-arrow-down-s-line { font-size: 0.9rem; transition: transform 0.2s; }

.mz-lang[data-open] .mz-lang-btn .ri-arrow-down-s-line { transform: rotate(180deg); }
.mz-lang[data-open] .mz-lang-btn { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }

.mz-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--landing-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(11, 61, 54, 0.22);
    z-index: 200;
}

.mz-lang-menu[hidden] { display: none; }

.mz-lang-menu:not([hidden]) { animation: mz-lang-in 0.18s ease-out; }

@keyframes mz-lang-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

.mz-lang-menu li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--landing-ink);
    font-size: 0.85rem;
    cursor: pointer;
}

.mz-lang-menu li:hover { background: rgba(14, 124, 102, 0.08); }

.mz-lang-menu li:focus-visible { outline: 2px solid var(--color-3); outline-offset: -2px; }

.mz-lang-tag {
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: rgba(11, 61, 54, 0.08);
    color: var(--color-1);
    font-size: 0.68rem;
    font-weight: var(--bold);
    letter-spacing: 0.06em;
}

.mz-lang-menu li .ri-check-line {
    margin-left: auto;
    color: var(--color-2);
    font-size: 1rem;
    opacity: 0;
}

.mz-lang-menu li[aria-selected="true"] { font-weight: var(--bold); }
.mz-lang-menu li[aria-selected="true"] .ri-check-line { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .mz-lang-menu:not([hidden]) { animation: none; }
    .mz-lang-btn .ri-arrow-down-s-line { transition: none; }
}

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
    .mz-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mz-plan--featured { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .mz-plan--featured { transform: none; }
}

/* ---------- 6. BORDER GLOW (wrappers creados por border-glow.js) ---------- */
/* El wrapper es invisible: UNA sola caja (la card). El anillo, el fill y la
 * luz exterior los pintan ::before/::after/.edge-light igual. */
.mz-glowwrap {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
/* Wrappers: el inner estira por grid; la card rellena por flex (height:100%
 * en cadena rompe el stretch y deja ver el fondo del wrapper = "fantasma"). */
.mz-glowwrap > .border-glow-inner {
    overflow: visible; /* el componente trae auto; acá recortaría el hover lift */
}

.mz-glowwrap > .border-glow-inner > article { flex: 1 0 auto; }

/* El fill se reserva para el hover cercano: el piso constante vive en el
 * anillo del borde + luz exterior, sin lavar la card. */
.mz-glowwrap::after {
    opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - 75) / (100 - 75));
}

/* ---------- 7. SECURITY: halo de voz propio (reemplaza anims FYSCAL) ---------- */
/* Se apagan los anillos/barras del portal; queda respiración menta + arco cónico
 * rotando (mismo lenguaje que BorderGlow). Los spans quedan en el HTML intactos. */
.security-anim span { display: none; }

.security-anim::before,
.security-anim::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0; /* el efecto "nace" con la card, no corre escondido desde el load */
}

.security-anim::before {
    width: 118px;
    height: 118px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(52, 211, 153, 0.3), transparent 70%);
}

.security-anim::after {
    width: 104px;
    height: 104px;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg,
        transparent 0%, transparent 66%,
        rgba(52, 211, 153, 0.9) 80%,
        rgba(167, 243, 208, 0.95) 87%,
        transparent 96%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

/* Las anims arrancan recién cuando la card entra al viewport: primero un
 * fade-in (mz-halo-in) y después el loop, ya con su fase desfasada por card. */
.security-card.visible .security-anim::before {
    animation: mz-halo-in 0.8s ease-out both, mz-halo-breathe 4.5s ease-in-out 0.8s infinite;
}
.security-card.visible .security-anim::after {
    animation: mz-halo-in-full 0.8s ease-out both, mz-halo-spin 9s linear infinite;
}

.security-card:nth-child(2).visible .security-anim::before { animation-delay: 0s, -0.7s; }
.security-card:nth-child(2).visible .security-anim::after { animation-delay: 0s, -3s; }
.security-card:nth-child(3).visible .security-anim::before { animation-delay: 0s, -2.2s; }
.security-card:nth-child(3).visible .security-anim::after { animation-delay: 0s, -6s; }

@keyframes mz-halo-in {
    from { opacity: 0; }
    to { opacity: 0.7; } /* termina donde arranca el breathe: entrada sin salto */
}

@keyframes mz-halo-in-full {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mz-halo-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
}

@keyframes mz-halo-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .security-anim::before,
    .security-anim::after { animation: none !important; opacity: 1; }
}

/* ---------- 8. CANALES (logos de lo que procesamos) ---------- */
.mz-channels { background: var(--landing-paper); border-top: 1px solid var(--landing-line); }

.mz-channels > .wrapper {
    width: var(--container-width);
    max-width: 1180px;
    margin: 0 auto;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mz-chan-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
}

.mz-chan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    min-height: 230px;
    padding: 1.4rem 1rem;
    border: 1px solid var(--landing-line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 10px 28px rgba(16, 38, 34, 0.05);
    text-align: center;
}

.mz-chan > i {
    font-size: 2rem;
    color: var(--color-1);
}

.mz-chan h3 { margin: 0; color: var(--landing-ink); font-size: 0.95rem; }

.mz-chan-status {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: var(--bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mz-chan-status.is-live { background: rgba(52, 211, 153, 0.16); color: var(--color-1); }
.mz-chan-status.is-soon { background: rgba(16, 38, 34, 0.07); color: var(--text); }

.mz-chan p { margin: 0; color: var(--text); font-size: 0.78rem; line-height: 1.55; flex: 1; }

.mz-chan .mz-mini-btn { margin-top: auto; }

/* ---------- 9. FAQ (rediseño propio sobre la mecánica del portal) ---------- */
.faq .wrapper .faq-container { counter-reset: mz-faq; max-width: 860px; gap: 0.9rem; }

.faq .wrapper .faq-container .faq-item {
    background: var(--white);
    border: 1px solid var(--landing-line);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(16, 38, 34, 0.04);
}

.faq .wrapper .faq-container .faq-item:hover {
    border-color: rgba(14, 124, 102, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(11, 61, 54, 0.1);
}

.faq .wrapper .faq-container .faq-item.active {
    border-color: var(--color-2);
    background:
        linear-gradient(rgba(52, 211, 153, 0.06), rgba(52, 211, 153, 0) 40%),
        var(--white);
    box-shadow: 0 18px 44px rgba(11, 61, 54, 0.12);
}

.faq .wrapper .faq-container .faq-item .faq-question { padding: 1.25rem 1.5rem; gap: 1rem; }

/* Número automático 01-05 */
.faq .wrapper .faq-container .faq-item .faq-question::before {
    counter-increment: mz-faq;
    content: "0" counter(mz-faq);
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: var(--bold);
    letter-spacing: 0.1em;
    color: var(--color-2);
    background: rgba(14, 124, 102, 0.1);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
}

.faq .wrapper .faq-container .faq-item .faq-question span {
    flex: 1;
    font-size: 1.02rem;
    color: var(--landing-ink);
}

.faq .wrapper .faq-container .faq-item.active .faq-question span { color: var(--color-1); }

/* Icono píldora: + menta que muta a × pino */
.faq .wrapper .faq-container .faq-item .faq-question i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(14, 124, 102, 0.1);
    color: var(--color-1);
    font-size: 1.2rem;
}

.faq .wrapper .faq-container .faq-item.active .faq-question i {
    background: var(--color-1);
    color: var(--white);
}

.faq .wrapper .faq-container .faq-item .faq-answer p {
    padding: 0 1.5rem 1.5rem calc(1.5rem + 2px);
    margin-left: 1.5rem;
    border-left: 2px solid var(--color-3);
    font-size: 0.92rem;
}

/* ---------- 10. DEMO v3: inbox WhatsApp ---------- */
/* Panel con altura fija tipo app: cada columna scrollea adentro,
 * la página no se estira. Ancho total amplio para 3 columnas. */
#demo > .wrapper { max-width: 1680px; }

#demo .atlas-demo-panel { max-width: 100%; }

#atlasDemoChat .atlas-real-shell { height: clamp(600px, 78vh, 780px); }

#atlasDemoChat .atlas-real-sidebar { display: flex; min-height: 0; }

#atlasDemoChat .atlas-real-sidebar-foot { flex-shrink: 0; }

#atlasDemoChat .mzc-log { min-height: 0; max-height: none; overflow-x: hidden; }

/* Sin scroll horizontal: los flex necesitan min-width:0 y el meta hace wrap */
#atlasDemoChat .mzc-main { min-width: 0; }

#atlasDemoChat .mz-fb { display: flex; flex-wrap: wrap; max-width: 100%; }

#atlasDemoChat .mz-fb-meta { min-width: 0; overflow-wrap: anywhere; }

#atlasDemoChat .mimetizer-style-list li > span { min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 1150px) {
    #atlasDemoChat .atlas-real-shell { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(240px, 290px); }
}

@media (min-width: 900px) and (max-width: 1149px) {
    #atlasDemoChat .atlas-real-shell {
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    #atlasDemoChat .mz-info {
        grid-column: 1 / -1;
        max-height: 190px;
        border-left: none;
        border-top: 1px solid rgba(11, 61, 54, 0.12);
    }
}

@media (max-width: 899px) {
    #atlasDemoChat .atlas-real-shell { display: flex; flex-direction: column; height: 92vh; }
    #atlasDemoChat .atlas-real-sidebar {
        flex-shrink: 0;
        max-height: 30%;
        border-right: none;
        border-bottom: 1px solid rgba(11, 61, 54, 0.12);
    }
    #atlasDemoChat .atlas-real-chat-panel.mzc { flex: 1; min-height: 0; }
    #atlasDemoChat .mz-info {
        flex-shrink: 0;
        max-height: 172px;
        border-left: none;
        border-top: 1px solid rgba(11, 61, 54, 0.12);
    }
}

/* Columna derecha: resumen automático + datos importantes */
.mz-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    background: var(--white);
    border-left: 1px solid rgba(11, 61, 54, 0.12);
}

.mz-info .atlas-real-sidebar-label { margin: 0 0 0.45rem; }

.mz-info .mimetizer-style-prompt { margin: 0 0 0.7rem; }

.mz-info .mimetizer-style-list { font-size: 0.78rem; }

/* Quién responde: la personalidad que atiende este chat */
.mz-who {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    padding: 0.6rem 0.7rem;
    border-radius: 14px;
    background: rgba(14, 124, 102, 0.08);
    border: 1px solid rgba(11, 61, 54, 0.12);
}

.mz-who .mzc-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    color: var(--white);
}

.mz-who .mzc-avatar > img { width: 22px; height: 22px; display: block; }

.mz-inbox-top { padding: 0.15rem 0.35rem 0.55rem; }

.mz-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(11, 61, 54, 0.06);
    color: var(--text);
}

.mz-search i { font-size: 1rem; }

.mz-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--landing-ink);
}

/* Filas del inbox: nombre + hora / preview + no leídos */
#atlasDemoChat .atlas-real-conv-btn { display: block; }

.mz-conv-top,
.mz-conv-bottom { display: flex; align-items: center; gap: 0.5rem; }

.mz-conv-top .atlas-real-conv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mz-conv-time { flex-shrink: 0; font-size: 0.68rem; color: var(--text); }

.mz-conv-bottom { margin-top: 0.15rem; }

.mz-conv-bottom .atlas-real-conv-preview { flex: 1; }

.mz-unread {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-2);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: var(--bold);
}

#atlasDemoChat .atlas-real-conv-btn.active .mz-conv-time { color: var(--color-1); }

/* Ficha colapsable: reutiliza el details de privacidad del portal */
#atlasDemoChat .atlas-real-privacy { margin-top: 0.2rem; }

#atlasDemoChat .atlas-real-privacy[open] summary { margin-bottom: 0.5rem; }

#atlasDemoChat .atlas-real-privacy .atlas-real-sidebar-label { margin: 0.55rem 0 0.35rem 0; }

/* Header del chat activo: con quién hablás (como WhatsApp) */
.mz-chat-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid rgba(11, 61, 54, 0.12);
    background: #f6faf8;
}

.mz-chat-head .mzc-avatar { width: 34px; height: 34px; font-size: 1rem; }

.mz-chat-name {
    color: var(--landing-ink);
    font-size: 0.92rem;
    font-weight: var(--bold);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mz-chat-sub { font-size: 0.72rem; color: var(--color-2); }

/* Botones del demo con borde degradado menta (activo + principal),
 * mismo lenguaje que el glow del sitio. */
#mzDemoTabs .mimetizer-persona-btn.active,
.atlas-real-new-chat-btn {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--color-1), var(--color-1)) padding-box,
        linear-gradient(135deg, var(--color-3), var(--color-2)) border-box;
    color: var(--white);
}

#mzDemoTabs .mimetizer-persona-btn:not(.active) { border: 1px solid rgba(11, 61, 54, 0.28); }

/* Punto verde: conversación en vivo (fork del visitante) */
.mz-livedot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-3);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

/* Tooltip: anclado al botón Nueva conversación */
.atlas-real-header-actions { position: relative; }

.mz-talk-tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: min(280px, 70vw);
    padding: 0.6rem 0.6rem 0.6rem 0.9rem;
    border-radius: 14px;
    background: var(--color-1);
    color: var(--white);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: normal;
    box-shadow: 0 14px 34px rgba(11, 61, 54, 0.35);
    animation: mz-tip-bob 2.6s ease-in-out infinite;
}

.mz-talk-tip::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 40px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-1);
    border-top: none;
}

.mz-talk-tip[hidden] { display: none; }

.mz-talk-tip button {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
}

.mz-talk-tip button:hover { background: rgba(255, 255, 255, 0.28); }

@keyframes mz-tip-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .mz-talk-tip { animation: none; }
}

/* El botón Nueva conversación pulsa hasta el primer mensaje */
.atlas-real-new-chat-btn.mz-talk-attn {
    animation: mz-btn-attn 1.6s ease-in-out infinite;
}

@keyframes mz-btn-attn {
    0%, 100% { box-shadow: 0 2px 8px rgba(11, 61, 54, 0.25), 0 0 0 0 rgba(52, 211, 153, 0.55); }
    50% { box-shadow: 0 2px 8px rgba(11, 61, 54, 0.25), 0 0 0 9px rgba(52, 211, 153, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-real-new-chat-btn.mz-talk-attn { animation: none; }
}

/* Canal de cada chat del inbox */
.mz-conv-chan { flex-shrink: 0; font-size: 0.85rem; }

.mz-conv-chan.is-wa { color: #128c4b; }
.mz-conv-chan.is-ig { color: #c13572; }
.mz-conv-chan.is-web { color: var(--color-2); }

/* Feedback real: mismo lenguaje que la píldora meta anterior —
 * texto chico + dos pulgares fantasma, sin barra ni ruido. */
.mz-fb {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.12rem 0.5rem 0.12rem 0.25rem;
    border-radius: 999px;
    background: rgba(14, 124, 102, 0.08);
    font-size: 0.68rem;
    color: var(--text);
}

.mz-fb-btn {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-2);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, color 0.15s;
}

.mz-fb-btn:hover:not(:disabled) { background: rgba(14, 124, 102, 0.16); transform: scale(1.12); }
.mz-fb-btn:disabled { cursor: default; opacity: 0.45; }
.mz-fb-btn.is-voted { background: var(--color-1); color: var(--white); opacity: 1; }

.mz-fb-meta { margin-left: 0.1rem; }

.mz-fb-note {
    font-size: 0.68rem;
    color: var(--color-2);
    font-weight: var(--bold);
}

/* Tabs de vista (Demo / En vivo) + feed en tiempo real */
.mz-viewtabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.mz-viewtabs .mimetizer-persona-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.4rem;
    font-size: 0.85rem;
}

.mz-viewtabs .mimetizer-persona-btn i { font-size: 1rem; }

/* Badge: preguntas nuevas mientras mirás el demo */
.mz-live-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-3);
    color: var(--color-1);
    font-size: 0.68rem;
    font-weight: var(--bold);
}

.mz-live-badge[hidden] { display: none; }

.mz-viewtabs .mimetizer-persona-btn.active {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--color-1), var(--color-1)) padding-box,
        linear-gradient(135deg, var(--color-3), var(--color-2)) border-box;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(11, 61, 54, 0.3);
}

.mz-live .atlas-real-header { background: linear-gradient(135deg, rgba(11, 61, 54, 0.08), transparent); }

.mz-live-list {
    list-style: none;
    margin: 0;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: min(560px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mz-live-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(11, 61, 54, 0.1);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(16, 38, 34, 0.06);
}

.mz-live-item.is-new { animation: mz-live-in 0.45s ease-out; }

@keyframes mz-live-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); border-color: var(--color-3); }
}

.mz-live-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    color: var(--white);
    font-weight: var(--bold);
    font-size: 0.9rem;
}

.mz-live-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.mz-live-q { color: var(--landing-ink); font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Pregunta clicable: despliega el chat completo */
button.mz-live-q {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

button.mz-live-q:hover { color: var(--color-1); text-decoration: underline; }

.mz-live-a {
    margin-top: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: #edf4ef;
    border: 1px solid rgba(11, 61, 54, 0.12);
    color: var(--landing-ink);
    font-size: 0.86rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mz-live-a[hidden] { display: none; }

.mz-live-votes {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.mz-live-item.open { border-color: var(--color-2); }

/* Orden del ranking */
.mz-live-sort {
    display: flex;
    gap: 0.4rem;
    padding: 0.85rem 1.2rem 0;
}

.mz-live-sortbtn {
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(11, 61, 54, 0.2);
    border-radius: 999px;
    background: transparent;
    color: var(--color-1);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: var(--bold);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mz-live-sortbtn:hover { background: rgba(14, 124, 102, 0.1); }

.mz-live-sortbtn.active { background: var(--color-1); border-color: var(--color-1); color: var(--white); }

.mz-live-meta { font-size: 0.72rem; color: var(--color-2); font-weight: var(--bold); }

.mz-live-empty {
    margin: 0;
    padding: 2.2rem 1.5rem;
    text-align: center;
    color: var(--text);
    font-size: 0.9rem;
}

.mz-live-empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mz-live-item.is-new { animation: none; }
}

/* Tabs de Mimics: 3 botones simples, sin modos ver/hablar */
#mzDemoTabs { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; }

#mzDemoTabs .mimetizer-persona-btn {
    flex: 1 1 auto;
    padding: 0.65rem 1.2rem;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

#mzDemoTabs .mimetizer-persona-btn:hover:not(.active) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 61, 54, 0.16);
}

#mzDemoTabs .mimetizer-persona-btn.active {
    box-shadow: 0 4px 14px rgba(11, 61, 54, 0.3);
}

/* Chips de pregunta: con presencia, como el resto de botones del sitio */
.mzc-chips .atlas-real-suggestion { font-size: 0.88rem; padding: 0.6rem 1.15rem; }

#atlasDemoChat .atlas-real-suggestions { flex-wrap: wrap; overflow-x: visible; }

/* ---------- Dos tipos de Mimic (landing) ----------
 * El producto ya no es "un chat": son Mimics de atención y Mimics para vos.
 * Va después de las capacidades, con el mismo lenguaje de tarjetas. */
.mz-dos { margin-top: 2.6rem; }
.mz-dos-title { font-size: 1.35rem; color: var(--landing-ink); margin: 0 0 0.3rem; }
.mz-dos-sub { font-size: 0.95rem; color: var(--text); margin: 0 0 1.1rem; }
.mz-dos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .mz-dos-grid { grid-template-columns: 1fr; } }