/* MM FAQ Builder — módulo CSS (requiere mmb-shared.css)
   -------------------------------------------------------------------------
   El bloque de preguntas frecuentes y el acordeón de la ficha de producto son
   la misma pieza: una lista de cosas que se abren y se cierran. Antes cada uno
   tenía su propio recuadro, su propio icono (+/− aquí, chevron allí), su propia
   tipografía y su propia alineación (centrada aquí, a la izquierda allí).

   Ahora comparten lenguaje con .mmuxa-* de matmap-ux-product: un solo bloque
   con separadores internos, chevron en círculo y el mismo ritmo de texto.
   El HTML no cambia; el "+" que viene del marcado se oculta y el icono se
   dibuja como fondo del círculo.                                            */

.mm-faq-container {
    width: 100%;
    max-width: 100%;
    margin: var(--mm-flow, 48px) auto;
    padding: 0;
    background: var(--mm-paper, #fff);
    border: 1px solid var(--mm-line, #e3e3ec);
    border-radius: var(--mm-r-lg, 16px);
    box-shadow: var(--mm-sh-1, 0 1px 2px rgba(26,26,46,.06));
    overflow: hidden;
    font-family: var(--mm-font, inherit);
}

/* ── Cabecera del bloque ── */
.mm-faq-h2 {
    font-weight: var(--mm-fw-bold, 700);
    color: var(--mm-brand, #3A3971);
    margin: 0;
    padding: 22px 20px 0;
    text-align: left;
    font-size: var(--mm-fs-h2, clamp(20px, 2vw, 26px));
    line-height: var(--mm-lh-tight, 1.2);
    letter-spacing: var(--mm-ls-title, -.012em);
}
.mm-faq-intro {
    text-align: left;
    color: var(--mm-ink-2, #4c4c68);
    font-size: var(--mm-fs-base, 15px);
    line-height: var(--mm-lh-base, 1.55);
    margin: 10px 0 0;
    padding: 0 20px 20px;
    max-width: 65ch;
}

/* ── Preguntas ── */
.mm-faq-item { margin: 0; border-bottom: none; }
.mm-faq-item + .mm-faq-item { border-top: 1px solid var(--mm-line, #e3e3ec); }
.mm-faq-item:first-of-type { border-top: 1px solid var(--mm-line, #e3e3ec); }
.mm-faq-item:last-of-type { border-bottom: none; }

.mm-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    background: var(--mm-paper, #fff);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--mm-ease, .18s ease);
    font-size: var(--mm-fs-md, 16px);
    font-weight: var(--mm-fw-medium, 600);
    line-height: 1.3;
    color: var(--mm-brand, #3A3971);
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}
.mm-faq-question:hover { background: var(--mm-wash, #f6f6fa); }
.mm-faq-question[aria-expanded="true"] {
    background: var(--mm-wash, #f6f6fa);
    border-radius: 0;
}
.mm-faq-question:focus-visible {
    outline: 2px solid var(--mm-brand, #3A3971);
    outline-offset: -2px;
}

/* ── Icono ──
   El "+"/"−" llega en el HTML. Se oculta con font-size:0 y se dibuja el mismo
   chevron que usa el acordeón de la ficha, para que el gesto se lea igual. */
.mm-faq-icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: var(--mm-r-full, 999px);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--mm-line, #e3e3ec);
    background-color: var(--mm-wash, #f6f6fa);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3971' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    font-size: 0;               /* oculta el +/− del marcado */
    line-height: 0;
    color: transparent;
    transition: background-color var(--mm-ease, .18s ease),
                transform var(--mm-ease, .18s ease);
}
.mm-faq-question[aria-expanded="true"] .mm-faq-icon {
    background-color: var(--mm-paper, #fff);
    color: transparent;
    transform: rotate(180deg);
}

/* ── Respuestas ── */
.mm-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
    background: var(--mm-paper, #fff);
    border: 0;
    border-radius: 0;
}
.mm-faq-answer.mm-open { grid-template-rows: 1fr; }
.mm-faq-answer-inner {
    overflow: hidden;
    padding: 0 20px;
    font-size: var(--mm-fs-base, 15px);
    line-height: var(--mm-lh-loose, 1.65);
    color: var(--mm-ink-2, #4c4c68);
}
.mm-faq-answer.mm-open .mm-faq-answer-inner { padding: 4px 20px 20px; }
.mm-faq-answer-inner > *:first-child { margin-top: 0; }
.mm-faq-answer-inner > *:last-child { margin-bottom: 0; }
.mm-faq-answer-inner a { color: var(--mm-brand, #3A3971); }

.mm-faq-meta {
    display: block; margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--mm-line, #e3e3ec);
    color: var(--mm-muted, #74748c);
    font-size: var(--mm-fs-xs, 12px); font-style: normal;
}
.mm-faq-meta a { color: var(--mm-brand, #3A3971); text-decoration: underline; }
.mm-faq-meta a:hover { color: var(--mm-accent, #e69130); }

/* ── Ficha de autor ── */
.mm-faq-author { margin: 0; padding: 18px 20px; border-top: 1px solid var(--mm-line, #e3e3ec); }
.mm-faq-author__inner {
    display: flex; align-items: center; gap: 16px;
    background: var(--mm-wash, #f6f6fa);
    border: 1px solid var(--mm-line, #e3e3ec);
    border-radius: var(--mm-r-md, 12px);
    box-shadow: none;
    padding: 14px 16px;
}
.mm-faq-author__avatar {
    width: 56px; height: 56px; border-radius: var(--mm-r-full, 999px);
    object-fit: cover; border: 2px solid var(--mm-paper, #fff);
    box-shadow: var(--mm-sh-1, 0 1px 2px rgba(26,26,46,.06)); flex: 0 0 56px;
}
.mm-faq-author__meta { line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.mm-faq-author__kicker {
    margin: 0;
    font-size: var(--mm-fs-eyebrow, 11.5px);
    letter-spacing: var(--mm-ls-eyebrow, .07em);
    text-transform: uppercase;
    font-weight: var(--mm-fw-medium, 600);
    color: var(--mm-muted, #74748c);
}
.mm-faq-author__name {
    margin: .2rem 0 0;
    color: var(--mm-brand, #3A3971);
    font-weight: var(--mm-fw-bold, 700);
    font-size: var(--mm-fs-base, 15px);
}
.mm-faq-author__role {
    margin: .1rem 0 0;
    color: var(--mm-muted, #74748c);
    font-size: var(--mm-fs-sm, 13.5px);
}
/* Mismo botón que el resto: relleno de marca, misma altura y mismo radio. */
.mm-faq-author__btn {
    margin-left: auto; flex-shrink: 0; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--mm-control-h, 46px);
    padding: 11px 20px;
    background: var(--mm-brand, #3A3971); color: #fff; text-decoration: none;
    font-weight: var(--mm-fw-medium, 600); font-size: var(--mm-fs-base, 15px);
    border-radius: var(--mm-r-md, 12px); border: 1px solid var(--mm-brand, #3A3971);
    transition: background var(--mm-ease, .18s ease), box-shadow var(--mm-ease, .18s ease);
}
.mm-faq-author__btn:hover {
    background: var(--mm-brand-ink, #2C2B57);
    border-color: var(--mm-brand-ink, #2C2B57);
    box-shadow: var(--mm-sh-2, 0 4px 16px rgba(26,26,46,.08));
    color: #fff; text-decoration: none;
}

@media (max-width: 640px) {
    .mm-faq-h2 { font-size: 1.2rem; padding: 18px 16px 0; }
    .mm-faq-intro { padding: 0 16px 16px; }
    .mm-faq-question { font-size: .95rem; padding: 15px 16px; gap: 10px; }
    .mm-faq-answer-inner { padding: 0 16px; }
    .mm-faq-answer.mm-open .mm-faq-answer-inner { padding: 2px 16px 16px; }
    .mm-faq-author { padding: 16px; }
    .mm-faq-author__inner { flex-wrap: wrap; text-align: center; justify-content: center; }
    .mm-faq-author__avatar { margin: 0 auto; }
    .mm-faq-author__meta { width: 100%; text-align: center; }
    .mm-faq-author__btn { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-faq-question, .mm-faq-icon, .mm-faq-answer { transition: none !important; }
}