/**
 * SonicMaps — Help Center / FAQ (2026).
 *
 * Pairs with sm-site.css, which carries the tokens, reset, typography, buttons,
 * the light header, the skyline and the footer. Nothing here is used by the
 * landing page (sm-home.css) or by the pricing page (sm-pricing.css).
 */

/* ---------- Masthead ---------- */

.faq-masthead {
    /* Longhand: comparte elemento con .container y la abreviatura le anularía
       los 24px laterales. */
    padding-top: clamp(44px, 6vw, 72px);
    padding-bottom: clamp(22px, 3vw, 34px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 13px;
}

/* weblogo360.png es blanco y con sombra proyectada: está hecho para el cielo oscuro
   de la portada. En vez de recolorearlo —invert() dejaba la sombra en blanco y se veía
   un halo recortado— se le da el fondo oscuro para el que fue diseñado. El disco lo
   convierte en un emblema deliberado y de paso lo ata al azul de la marca. */
.faq-masthead__logo {
    width: clamp(96px, 12vw, 124px);
    height: clamp(96px, 12vw, 124px);
    border-radius: 50%;
    background-color: var(--sm-ink-hero);
    background-image: url(../../images/weblogo360.png);
    background-repeat: no-repeat;

    /* Ajustado a ojo: el centro geométrico del archivo (50% 50%) no es el óptico,
       porque el anillo está arriba y la flecha sobresale por abajo a la izquierda.
       Estos dos valores centran el anillo dentro del disco. */
    background-size: 62%;
    background-position: 49% 58%;
}

.faq-masthead__title { margin: 0; font-size: clamp(32px, 5.2vw, 48px); line-height: 1.05; }
.faq-masthead__lead { margin: 0; max-width: 620px; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--sm-muted); }

/* ---------- Índice de secciones ---------- */

/* Son 17 preguntas en tres grupos: sin un índice, quien llega buscando algo del
   Player tiene que pasar por delante de todo el Editor. */
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.faq-jump a {
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: var(--sm-ink);
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: 999px;
    padding: 9px 18px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.faq-jump a:hover { background: #E6EBF2; border-color: #CBD3DE; color: var(--sm-ink); }

/* ---------- Grupos de preguntas ---------- */

.faq-body { padding-top: clamp(26px, 3.4vw, 40px); }
.faq-body__inner { max-width: var(--sm-measure); margin: 0 auto; }

.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }

/* scroll-margin: el índice lleva a un ancla y sin esto el título queda pegado
   al borde superior de la ventana. */
.faq-group h2 {
    margin: 0 0 18px;
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    scroll-margin-top: 24px;
}
.faq-group__intro { margin: -8px 0 18px; font-size: 15px; line-height: 1.6; color: var(--sm-muted-2); }

.faq-list { display: flex; flex-direction: column; border-top: 1px solid #DCE2EA; }

.faq-list details { border-bottom: 1px solid #DCE2EA; }

/* El triángulo nativo no se puede colocar ni animar, así que se quita y el
   indicador lo dibuja ::after sobre el propio <summary>. */
.faq-list summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 5px 0 0 auto;
    border-right: 2.4px solid var(--sm-blue);
    border-bottom: 2.4px solid var(--sm-blue);
    transform: rotate(45deg);
    transform-origin: 70% 70%;
    transition: transform 0.18s ease;
}
.faq-list details[open] > summary::after { transform: rotate(-135deg); }

.faq-list summary:hover { color: var(--sm-blue-dark); }

.faq-list__answer { padding: 0 4px 20px; font-size: 15px; line-height: 1.65; color: var(--sm-muted); }
.faq-list__answer p { margin: 0 0 12px; }
.faq-list__answer > :last-child { margin-bottom: 0; }
.faq-list__answer ol,
.faq-list__answer ul { margin: 0 0 12px; padding-left: 20px; }
.faq-list__answer li + li { margin-top: 8px; }
.faq-list__answer strong { color: var(--sm-ink); }
.faq-list__answer img { vertical-align: middle; }

/* ---------- Llamada final ---------- */

.faq-cta { padding-bottom: var(--sm-section-pad); }
.faq-cta__box {
    max-width: 820px;
    margin: 0 auto;
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.faq-cta__box h2 { margin: 0; font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.faq-cta__box p { margin: 0; font-size: 17px; color: var(--sm-muted); }
.faq-cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 6px; }

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
    .faq-list summary { font-size: 16px; gap: 12px; }
    .faq-jump a { font-size: 14px; padding: 8px 15px; }
}

/* ---------- Guías paso a paso (troubleshooting) ---------- */

/* Misma columna y mismos grupos que el FAQ; lo único propio es la lista numerada
   y el tratamiento de las capturas. */

.guide-prose { font-size: 15px; line-height: 1.65; color: var(--sm-muted); }
.guide-prose p { margin: 0 0 14px; }
.guide-prose > :last-child { margin-bottom: 0; }
.guide-prose strong { color: var(--sm-ink); }

/* El número lo pone un contador, así no hay que escribir "Step 1" en el texto
   ni renumerar a mano si algún día se añade o se quita un paso. */
.guide-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.guide-steps > li { counter-increment: step; margin-bottom: 34px; }
.guide-steps > li:last-child { margin-bottom: 0; }

.guide-steps > li > p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--sm-muted); }
.guide-steps > li > p strong { color: var(--sm-ink); }

/* La etiqueta va encima del parrafo, no a su lado: en grid TODOS los hijos del
   parrafo se vuelven celdas, y el <strong> con la ruta de ajustes se escapaba a
   una fila propia partiendo la frase en dos. */
.guide-steps > li::before {
    content: "Step " counter(step);
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sm-blue);
}

.guide-list { margin: 0 0 14px; padding-left: 20px; font-size: 15px; line-height: 1.65; color: var(--sm-muted); }
.guide-list li + li { margin-top: 8px; }

/* Las capturas son anchas (2:1) y van a sangre dentro de la columna. */
.guide-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sm-border);
    border-radius: 12px;
    background: var(--sm-surface);
}

.guide-rule { border: 0; border-top: 1px dotted #C3CCD8; margin: 34px 0; }

/* El "Help Center" del masthead es el camino de vuelta al índice en las páginas
   interiores; en el FAQ es texto plano y no lleva este estilo. */
.eyebrow__link { color: inherit; text-decoration: none; }
.eyebrow__link:hover { color: var(--sm-blue-dark); text-decoration: underline; }


/* ---------- Capturas ampliables ---------- */

/* Las capturas de ajustes se leen mal a tamano de pagina: hay que distinguir un
   interruptor concreto. Se abren en el visor compartido (sm-site.css). */
.guide-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    cursor: zoom-in;
    line-height: 0;
}
.guide-zoom__badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: rgba(14, 26, 43, 0.72);
    backdrop-filter: blur(4px);
}
.guide-zoom__badge svg { width: 19px; height: 19px; }
/* Donde hay raton el chip espera al hover; en tactil se queda siempre visible */
@media (hover: hover) {
    .guide-zoom__badge { opacity: 0; transition: opacity 0.15s ease; }
    .guide-zoom:hover .guide-zoom__badge,
    .guide-zoom:focus-visible .guide-zoom__badge { opacity: 1; }
}

/* Va al final a proposito: .guide-zoom declara width:100% mas arriba y, con la misma
   especificidad, gana la regla que aparece despues aunque la otra este en una media
   query. Antes se quedaba en 820px y conservaba el margen negativo, asi que no se
   ensanchaba y ademas salia descentrada hacia la izquierda. */
@media (min-width: 1200px) {
    /* Sobre el boton, no sobre la imagen: si se saliera solo la imagen, la zona
       pulsable y la lupa (posicionada respecto al boton) se quedarian cortas. */
    /* Cada captura lleva su --shot-w en el marcado, calculado para que todas se
       dibujen a la misma altura (~545px): si no, un montaje de 3 pantallas y otro
       de 4 mostrados al mismo ancho hacen los moviles de distinto tamano. */
    /* Se centra contra el ancho de TEXTO, que es la medida menos las dos
       guardas de 24px. Antes aqui habia un 820 escrito a mano, que era el valor
       declarado y no el real: las capturas salian 24px corridas a la derecha. */
    .guide-zoom {
        width: var(--shot-w, 1060px);
        margin-left: calc((var(--sm-measure) - 48px - var(--shot-w, 1060px)) / 2);
    }
}