@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| Tipografía central del editor de noticias
|--------------------------------------------------------------------------
*/

@import url(
    'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700;900&display=swap'
);

/* ==========================================================================
   Controles del editor
   ========================================================================== */

.typography-controls {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin-top: 18px;
    padding: 18px;

    border: 1px solid #dbe4ee;
    border-radius: 12px;

    background: #f7faff;
}

.typography-control,
.typography-field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.typography-control-label,
.typography-label {
    color: #17202a;

    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
}

.typography-control-select,
.typography-select {
    width: 100%;
    min-height: 48px;

    padding:
        10px
        42px
        10px
        14px;

    border: 1px solid #cddbea;
    border-radius: 10px;

    background-color: #ffffff;

    color: #17202a;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size: .95rem;

    cursor: pointer;
    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.typography-control-select:hover,
.typography-select:hover {
    border-color: #8dbce8;
}

.typography-control-select:focus,
.typography-select:focus {
    border-color: #006fd6;

    box-shadow:
        0 0 0 4px
        rgba(0, 111, 214, .15);
}

.typography-help {
    grid-column: 1 / -1;

    margin: 0;

    color: #6d7784;

    font-size: .82rem;
    line-height: 1.5;
}

/* ==========================================================================
   Familias tipográficas
   ========================================================================== */

.mdptv-font-montserrat {
    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;
}

.mdptv-font-poppins {
    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif !important;
}

.mdptv-font-roboto {
    font-family:
        "Roboto",
        Arial,
        Helvetica,
        sans-serif !important;
}

.mdptv-font-merriweather {
    font-family:
        "Merriweather",
        Georgia,
        "Times New Roman",
        serif !important;
}

.mdptv-font-playfair {
    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif !important;
}

/* ==========================================================================
   Título principal
   ========================================================================== */

.mdptv-size-title-compact {
    font-size:
        clamp(
            2rem,
            4.2vw,
            3rem
        ) !important;

    line-height: 1.14 !important;
}

.mdptv-size-title-standard {
    font-size:
        clamp(
            2.35rem,
            5.2vw,
            4rem
        ) !important;

    line-height: 1.12 !important;
}

.mdptv-size-title-large {
    font-size:
        clamp(
            2.7rem,
            6vw,
            5rem
        ) !important;

    line-height: 1.08 !important;
}

/* ==========================================================================
   Bajada o subtítulo principal
   ========================================================================== */

.mdptv-size-subtitle-compact {
    font-size:
        clamp(
            1rem,
            1.8vw,
            1.15rem
        ) !important;

    line-height: 1.6 !important;
}

.mdptv-size-subtitle-standard {
    font-size:
        clamp(
            1.1rem,
            2vw,
            1.3rem
        ) !important;

    line-height: 1.6 !important;
}

/* ==========================================================================
   Subtítulos internos
   ========================================================================== */

.mdptv-size-heading-small {
    font-size:
        clamp(
            1.15rem,
            2vw,
            1.3rem
        ) !important;

    line-height: 1.35 !important;
}

.mdptv-size-heading-standard {
    font-size:
        clamp(
            1.35rem,
            2.3vw,
            1.65rem
        ) !important;

    line-height: 1.3 !important;
}

.mdptv-size-heading-large {
    font-size:
        clamp(
            1.55rem,
            2.8vw,
            2rem
        ) !important;

    line-height: 1.25 !important;
}

/* ==========================================================================
   Párrafos
   ========================================================================== */

.mdptv-size-paragraph-small {
    font-size: .95rem !important;
    line-height: 1.75 !important;
}

.mdptv-size-paragraph-standard {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

.mdptv-size-paragraph-large {
    font-size: 1.16rem !important;
    line-height: 1.72 !important;
}

/* ==========================================================================
   Citas
   ========================================================================== */

.mdptv-size-quote-standard {
    font-size:
        clamp(
            1.2rem,
            2.3vw,
            1.45rem
        ) !important;

    line-height: 1.55 !important;
}

.mdptv-size-quote-large {
    font-size:
        clamp(
            1.4rem,
            2.8vw,
            1.75rem
        ) !important;

    line-height: 1.48 !important;
}

/* ==========================================================================
   Listas
   ========================================================================== */

.mdptv-size-list-small {
    font-size: .95rem !important;
    line-height: 1.7 !important;
}

.mdptv-size-list-standard {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}

.mdptv-size-list-large {
    font-size: 1.16rem !important;
    line-height: 1.68 !important;
}

/* ==========================================================================
   Textos destacados
   ========================================================================== */

.mdptv-size-highlight-small {
    font-size: .98rem !important;
    line-height: 1.65 !important;
}

.mdptv-size-highlight-standard {
    font-size: 1.1rem !important;
    line-height: 1.62 !important;
}

.mdptv-size-highlight-large {
    font-size:
        clamp(
            1.2rem,
            2.2vw,
            1.4rem
        ) !important;

    line-height: 1.55 !important;
}

/* ==========================================================================
   Adaptación para pantallas pequeñas
   ========================================================================== */

@media (max-width: 640px) {
    .typography-controls {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 15px;
    }

    .typography-help {
        grid-column: auto;
    }
}