/*
 * Tipografías compartidas del sitio público de Quimika.
 * Cargar después de styles.css y quimika-web.css.
 * DM Sans utiliza el archivo local que ya declara quimika-web.css.
 * Outfit se carga desde el enlace de Google Fonts del documento.
 */
body.q-web {
    --q-font-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --q-font-titulo: "Outfit", "DM Sans", system-ui, sans-serif;
    --q-font-marca: "Times New Roman", Times, serif;

    font-family: var(--q-font-texto);
}

body.q-web :is(button, input, select, textarea, summary) {
    font-family: var(--q-font-texto);
}

body.q-web :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--q-font-titulo);
    font-weight: 600;
}

/* Evitar que los énfasis de los títulos vuelvan a la antigua DM Serif. */
body.q-web :is(h1, h2, h3, h4, h5, h6) :is(em, strong, span) {
    font-family: inherit;
}

body.q-web h1 em,
body.q-web h2 em {
    font-weight: inherit;
}

/* Encabezados de la demostración de la app que no utilizan h1–h6. */
body.q-web .phone-section-title strong,
body.q-web .profile-name,
body.q-web .demo-own-profile > strong,
body.q-web .chat-heading > span {
    font-family: var(--q-font-titulo);
}

body.q-web .chat-heading small {
    font-family: var(--q-font-texto);
}

/* Nombre de marca: conservar la serifa regular en todas sus apariciones. */
body.q-web .q-wordmark {
    font-family: var(--q-font-marca);
    font-weight: 400;
}

/* Lectura cómoda en el sitio público. */
body.q-web {
    font-size: 16px;
    line-height: 1.75;
}

body.q-web .main-nav,
body.q-web .main-nav > a,
body.q-web .text-link,
body.q-web .webapp-link,
body.q-web .copy-email {
    font-size: 15px;
}

body.q-web .eyebrow,
body.q-web .hero .eyebrow {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .08em;
}

body.q-web .hero h1 {
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

body.q-web .hero h1 .q-hero-line,
body.q-web .hero h1 em {
    display: block;
}

body.q-web .hero-description {
    max-width: 480px;
    font-size: 18px;
    line-height: 1.75;
}

body.q-web .hero .text-link {
    font-size: 16px;
}

body.q-web .hero-note {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 14px;
    line-height: 1.6;
}

body.q-web .hero-photo-caption {
    max-width: 100%;
    font-size: 14px;
    letter-spacing: .08em;
}

body.q-web .play-button small {
    font-size: 14px;
    letter-spacing: .06em;
}

body.q-web .play-button strong,
body.q-web .hero .play-button strong {
    font-size: 22px;
}

body.q-web .promise-inner {
    flex-wrap: wrap;
    gap: 16px 24px;
}

body.q-web .promise-inner > span {
    font-size: 15px;
    line-height: 1.6;
}

body.q-web .step-number,
body.q-web .step-caption,
body.q-web .stage-label,
body.q-web .demo-caption,
body.q-web .download-age,
body.q-web .art-sub {
    font-size: 14px;
    line-height: 1.6;
}

body.q-web .stage-label,
body.q-web .art-sub {
    letter-spacing: .07em;
    text-align: center;
}

body.q-web .feature-tab strong {
    font-size: 18px;
    line-height: 1.4;
}

body.q-web .feature-tab small,
body.q-web .care-features p,
body.q-web .faq-list details p,
body.q-web .contact-section p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.75;
}

body.q-web .faq-list summary {
    font-size: 17px;
    line-height: 1.5;
}

body.q-web .footer-top > div > p,
body.q-web .footer-top nav,
body.q-web .footer-app small,
body.q-web .footer-bottom,
body.q-web .footer-bottom b,
body.q-web .toast {
    font-size: 14px;
    line-height: 1.7;
}

body.q-web .footer-bottom {
    flex-wrap: wrap;
}

/* La demostración también aumenta sus textos y permite leer el contenido largo. */
body.q-web .phone {
    width: min(320px, 100%);
    height: 680px;
    font-size: 14px;
    line-height: 1.5;
}

body.q-web .phone .demo-screen {
    max-height: 550px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 20px;
}

body.q-web .phone-status,
body.q-web .phone-section-title small,
body.q-web .photo-counter,
body.q-web .profile-city,
body.q-web .profile-tags span,
body.q-web .demo-own-profile > span,
body.q-web .demo-profile-section small,
body.q-web .interest-tags span,
body.q-web .chat-heading small,
body.q-web .chat-date,
body.q-web .bubble small {
    font-size: 12px;
    line-height: 1.5;
}

body.q-web .phone-section-title strong {
    font-size: 19px;
    line-height: 1.4;
}

body.q-web .demo-own-profile > p,
body.q-web .demo-profile-row,
body.q-web .bubble,
body.q-web .chat-composer {
    font-size: 14px;
    line-height: 1.5;
}

body.q-web .profile-city {
    align-items: flex-start;
}

body.q-web .profile-city .icon {
    flex-shrink: 0;
    margin-top: 3px;
}

body.q-web .demo-profile-row {
    gap: 12px;
    align-items: flex-start;
}

body.q-web .demo-profile-row b {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (min-width: 801px) and (max-width: 1100px) {
    body.q-web .main-nav {
        gap: 14px;
        font-size: 14px;
    }

    body.q-web .main-nav > a {
        font-size: 14px;
    }
}

@media (max-width: 800px) {
    body.q-web .main-nav > a {
        font-size: 16px;
    }

    body.q-web .hero-description {
        font-size: 18px;
    }

    body.q-web .hero-note {
        max-width: 360px;
    }
}