/** 
 * HOME
 *      ················|—————————————————>   MD           (767px < screen)
    ========================================================================== */




/** 
 * Card (.card)
 *
 * BEM
 *  card
 *      __image
 *      __type
 *          __type-icon
 *
 * @markup
    <div class="card[--header]">
        <img alt="[text]" class="card__image" src="[url]">
        <div class="card-body">
            <p class="card__type">
                <svg class="card__type-icon">[svg]</svg>
                [text]
            </p>
            <p>[text]</p>
        </div>
        [<div class="card-footer">[read-more]</div>]
    </div>
    ========================================================================== */


.card {
    --mdb-border-radius: 1rem;
    --mdb-card-border-radius: 1rem;
    transition: all 500ms;
}

    .card:hover {
        --mdb-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
        transform: scale(1.02);
    }

    .card .card-title {
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 2px;
        display: /*inline-block*/ block;
        padding-bottom: 1px;
        position: relative;
        transition: background-size 0.3s;
    }

        .card .card-title:has(.card__type-icon) {
            background-position: /* 1.63rem en vez de 0 si se quiere dejar el hueco del icono */ 0 100%;
        }

    .card:hover .card-title {
        background-size: 100% 2px;
    }

.card--header {
    background-color: var(--dizo-color-bluewood-50);
}

.card__image {
    height: 18rem;
    object-fit: cover;
    width: auto;
}

.card__type {
    white-space: nowrap;
}

    .card__type svg {
        height: 1em;
        width: 1em;
    }




/** 
 * Card today (.card--today)
 *
 * BEM
 *  card--today
 *      __title
 *      __type
 *
 * @markup
    <article class="card--today">
        <div class="card-header">[text]</div>
        <div class="card-body">
            <article class="card">
                <div class="card-head">
                    <h3 class="card__title card--today__title">
                        <time datetime="[date]">[number]</time>
                    </h3>
                </div>
                <div class="card-body">
                    <div>                                
                        <strong>[text]</strong>
                        <div class="card--today__type">[text]</div>
                    </div>
                    <div class="card-body">
                        <span class="profession">[text]</span>                            
                    </div>
                </div>
            </article>
            [card]
        </div>
    </article>
    ========================================================================== */


.card--today {
    color: #2c4a67;
}

card--today__item {
    --mdb-border-radius: 0.5rem;
}

.card--today__title {
    --mdb-border-radius: 0.25rem;
    background-color: #fadca2;
}

.card--today__type {
    --mdb-border-radius: 0.25rem;
}

    .card--today__type.border-warning {
        background: #fadca2;
    }

/**
 * 1. PBI 2416 (aumento de contraste)
 */
.profession {
    color:
    /* #898988 */
    rgb(59 59 59) /* 1 */;
}

    .profession:first-letter {
        text-transform: uppercase;
    }




/** 
 * Card > Read more (.read-more)
 *
 * @markup
   <a class="read-more">[text]</a>
    ========================================================================== */


.read-more {
    --mdb-border-radius: 1rem;
    --mdb-link-hover-color-rgb: var(--mdb-body-bg);
    background-color: #464544;
    color: var(--dizo-color-alabaster);
    display: inline;
    font: var(--dizo-caption-2-font);
    font-variation-settings: var(--dizo-caption-2-font-variation-settings);
    letter-spacing: var(--dizo-caption-2-letter-spacing);
}

    .read-more svg {
        color: var(--dizo-color-accent-color);
        margin-left: 0.25rem;
        width: 1rem;
    }




/** 
 * Card > See all (.see-all)
 *
 * @markup
   <a class="see-all">[text]</a>
    ========================================================================== */


.see-all {
    --mdb-border-color: var(--mdb-btn-outline-border-color);
    --mdb-border-radius: 1rem;
    border-bottom-width: var(--mdb-btn-border-width) !important;
    color: initial;
}




/** 
 * Page (.page)
 *
 * BEM
 *  page
 *      __intro
 *          __title
 *
 * @markup
    <body class="page">
        [text]
        <article class="page__intro">
            <h2 class="page__title">[text]</h2>
            <form class="header-searcher">[text]</form>
            [text]
        </article>
        [text]
    </div>
    ========================================================================== */


.page {
    font: var(--dizo-label-font);
    overflow-x: hidden; /* para evitar el bug de la imagen de fondo de .page__intro */
}

.page__intro {
    position: relative;
}

.page__intro-content {
    --mdb-border-radius: 1rem;
    border-radius: var(--mdb-border-radius);
    color: #fff;
    margin: 0 auto 1rem;
    max-width: 80ch;
    position: relative;
    /* glassmorphisn from https://css.glass */
    background: rgba(150,150, 255, 0.25);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
    /*border: 1px solid rgba(255, 255, 255, 0.2);*/
}


.page__intro-theme {
    background: no-repeat center;
    /* gradient from cssgradient.io */
    background-image: radial-gradient(circle, rgba(250, 100, 50, 0.9) 0%, rgba(20, 75, 215, 0.9) 100%), url(/img/landing-page/background.webp);
    background-size: cover;
    bottom: -1rem;
    left: 50%;
    position: absolute;
    top: -1rem;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
}

.page__title {
    font-family: var(--dizo-font-body);
    font-size: 2.75rem;
}




/** 
 * Page > Header    (.header)
 *
 * BEM
 *  header
 *      __brand
 *      __main
 *          __title
 *          __security
 *      __searcher
 *      __nav
 *
 * @markup
    <header class="header">
        <div class="container">
            <div class="header__brand">[navbar-brand]</div>
            <div class="header__main">
                <span class="header__title">[text]</span>
                <nav class="header__security">[header-security]</nav>
            </div>
            <form class="header__searcher">[header-searcher]</form>
        </div>
        <div class="off-canvas">[off-canvas]</div>
        <nav class="header__nav">
            <div>[nav]</div>
        </nav>
    </header>
    ========================================================================== */


.header__title {
    font-size: small;
    font-weight: normal;
    line-height: 1.5;
}

@media (width < 768px) {
    .header__main {
        row-gap: 0.25rem;
    }
}

@media (width < 992px) {
    .header__title {
        margin-block: 0 1rem;
        width: 100%;
    }

        .header__title br {
            display: none;
        }
}

@media (577px < width < 768px) {
    .header__title br {
        display: none;
    }
}

@media (width < 768px) {
    .header__title {
        font-size: 0.725rem;
        margin-bottom: 0.5rem;
    }
}




/** 
 * Page > Header > Searcher  (.header-searcher)
 *
 * @markup
    <form class="header-searcher">

        <!-- Inicial -->
        [
            <select>[option]</select>
            <label class="select-label">[text]</label>
        ]
        <!-- Procesado -->
        [<div class="header-searcher__select-multiple">[select-wrapper]</div>]

        <input class="header-searcher__search" />
        <button class="header-searcher__trigger">
            <img class="header-searcher__loupe" />
        </button>
        <a class="header-searcher__index">[text]</a>
        <input type="hidden" />
    </form>
    <form class="header-searcher">
        <input class="trigger" id="filtro-secciones" type="checkbox" />
        <div class="select-wrapper">
            <div class="form-outline">
                <input class="select-input" />
                <label class="select-label">[content]</label>
                <span class="select-arrow"></span>
                <div class="form-notch">
                    <div class="form-notch-leading"></div>
                    <div class="form-notch-middle"></div>
                    <div class="form-notch-trailing"></div>
                </div>
            </div>
            <select class="searcher__input">[option]</select>
        </div>
    
        <input class="form-control searcher__input searcher__trigger header-searcher__search" id="global-search" placeholder="Buscar en el diccionario" aria-label="Búsqueda global" type="search" data-val="true" data-val-required="The GlobalSearch field is required." name="GlobalSearch" value="">
        <button class="btn btn-primary px-2 searcher__trigger header-searcher__trigger shadow-none" title="Buscar">
            <img alt="Buscar" class="searcher__trigger-loupe header-searcher__loupe" src="/svg/loupe.svg">
        </button>

        <a class="header-searcher__voices">
            <svg>
                <path></path>
            </svg>
            [content]
        </a>

        <label class="d-flex align-items-center" for="filtro-secciones">
            <svg>
                <path></path>
                <path></path>
                <path></path>
                <path></path>
                <path></path>
                <path></path>
            </svg>
            [content]
        </label>

        <a class="header-searcher__index">
            <svg>
                <path></path>
            </svg>
            [content]
        </a>

    </form>
    ========================================================================== */


.header-searcher {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: auto 1fr 1fr;
    padding-bottom: 3rem;
}

    .header-searcher nav {
        flex-wrap: wrap;
        gap: 1rem;
        grid-column: span 3;
        justify-content: end;
        padding: 1rem;
    }

        .header-searcher nav > * {
            color: #fff;
            cursor: pointer;
            font: var(--dizo-caption-2-font);
            font-size: 0.9rem;
            font-variation-settings: var(--dizo-caption-2-font-variation-settings);
            letter-spacing: var(--dizo-caption-2-letter-spacing);
            position: relative;
        }

            .header-searcher nav > *:hover::after {
                content: '';
                inset: auto 0 0 1.2rem;
                outline: 1px solid;
                position: absolute;
            }

    .header-searcher svg {
        height: 1rem;
        margin-right: 0.25em;
        width: 1rem;
    }

    .header-searcher .input-group {
        grid-column: span 3;
    }

    .header-searcher:has(#filtro-secciones:checked) .input-group {
        grid-column: span 2;
    }

    .header-searcher .select-input {
        font: inherit;
        line-height: 2;
    }

.header-searcher .form-notch div {
    border: none !important;
}

.header-searcher.searcher .select-wrapper {
    border-radius: 0.25rem !important;
    margin-right: 1rem;
}

.header-searcher__search {
    border-radius: 0.25rem 0 0 0.25rem !important;
    box-shadow: var(--mdb-box-shadow)
}

    .select-wrapper:has(.select-label.active) {
        display: block;
    }




/** 
 * <MD
 *      <----------------|··················   <MD          (screen < 768)
    ========================================================================== */


@media (width < 768px) {
    .header-searcher {
        display: flex;
        flex-direction: column;
    }

        .header-searcher .select-wrapper {
            margin-block-end: 1rem;
            margin-inline: 0;
        }
}




/** 
 * Page > Header > Searcher > Select multiple  (.header-searcher)
 *
 * @markup
    <div class="select-wrapper">
        <div class="form-outline">
            <input class="form-control select-input">
            <span class="select-arrow"></span>
            <div class="form-notch">
                <div class="form-notch-leading"></div>
                <div class="form-notch-middle"></div>
                <div class="form-notch-trailing"></div>
            </div>
        </div>
        <select class="form-select searcher__input select-initialized">
            <option value="[text]">[text]</option>
        </select>
    </div>
    ========================================================================== */


.select-wrapper {
    background-color: #fff;
}




/** 
     * Main content > Section (.section)
     *
     * BEM
     *  section
     *      __header
     *          __title
     *          __header-action
     *
     * @markup
        <article class="section--[intro|latest-updated|news|resources|stand-out]">
            <div class="section__header">
                <h2 class="section__title">[text]</h2>
                [<a class="section__header-action">[text]</a>]
            </div>
        </div>
        ========================================================================== */


.section__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100% !important;
}

.section__header-action {
    font: var(--dizo-caption-2-font);
    font-variation-settings: var(--dizo-caption-2-font-variation-settings);
    letter-spacing: var(--dizo-caption-2-letter-spacing);
}

.section__title {
    color: #2c4a67;
    font-weight: 800;
}




/** 
     * Main content > Section > Resources > Card (.section--resources .card)
     *
     * BEM
     *  card
     *      __image
     *
     * @markup
        <article class="section--resources">
            <div class="section__header">
                <h2 class="section__title">[text]</h2>
            </div>
            <div>
                <div class="card">
                    <div>
                        <div>
                            <img class="card__image" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        ========================================================================== */


.section--resources .card {
    background-color: #faf4f3;
}

.section--resources .read-more {
    border: 1px solid var(--dizo-color-accent-color);
    background-color: transparent;
    color: inherit;
    font-weight: bold;
}

    .section--resources .read-more svg {
        color: inherit;
    }




/** 
 * Main content > Section > Stand out (.section--stand-out)
 *
 * BEM
 *  card
 *      __image
 *
 * @markup
    <article class="section--stand-out">
        <div class="section__header">
            <h2 class="section__title">[text]</h2>
            <a class="section__header-action">[text]</a>
        </div>
        <div>
            <div class="card">
                <img class="card__image" />
                <div class="card-body">
                    <h3 class="card-title">
                        [svg]
                        [text]
                    </h3>
                    [p]
                </div>
            </div>
        </div>
    </div>
    ========================================================================== */


.section--stand-out .card-title svg {
    height: 0.75em;
    line-height: 1em;
    transform: translateY(-0.1rem);
}




/** 
 * Main content > Section > Today (.section--today)
 *
 * BEM
 *  card
 *      __image
 *
 * @markup
    <article class="section--today">
        <div>
            <article class="card--today">
                <div>
                    [svg]
                    <h2 class="section--today__title">
                        [text] 
                        <time datetime="[date]">[text]</time>
                    </h2>
                </div>
                <div>[text]</div>
            </article>
        </div>
    </div>
    ========================================================================== */


.card--today .stretched-link {
    color: #2c4a67;
    font: var(--dizo-caption-2-font);
    font-variation-settings: var(--dizo-caption-2-font-variation-settings);
    letter-spacing: var(--dizo-caption-2-letter-spacing);
}

    .card--today .stretched-link svg {
        height: 1.5em;
    }

.section--today__title {
    font-size: calc(1.325rem + 0.25vw);
}




/** 
 * Main content > Page Detail > Expandable Content (.expandable)
 *
 * BEM
 *  expandable
 *      __trigger
 *      __actuator
 *
 * @markup
    <article class="expandable">
        <input class="expandable__trigger" id="[text]" type="checkbox" />
        <label class="expandable__actuator" for="[.expandable__trigger#id]">[text]</label>
    </article>
    ========================================================================== */


.expandable {
    max-height: 16rem;
}

.expandable__actuator {
    height: 1.15rem;
    inset-inline: 1rem;
    z-index: 2;
}

    .expandable__actuator::after {
        transform: translateY(-0.4rem) rotate(135deg);
    }

    .expandable__actuator::before {
        mask-image: linear-gradient(black 95%, transparent 100%);
    }

.expandable__trigger:checked ~ .expandable__actuator {
    bottom: 0;
}

/**
 * Ocultar Mailchimp
 */
a[href*="eepurl.com"] {
    display: none;
}

#mc_embed_signup :is(form,h2) {
    margin: 0 !important;
}

#mc_embed_signup .button {
    background: var(--dizo-color-accent-color-bg) !important;
    text-transform: none;
}

#mc_embed_signup img,
#mc_embed_signup .helper_text {
    height: 1px;
    overflow: hidden;
    opacity: 0;
    padding: 0;
}

#mc_embed_signup input {
    background: transparent !important;
}


/**
 *  PBI 2416 (el botón presenta borde cuando tiene el foco)
 */
#mc_embed_signup input:focus {
    border: 2px solid #333;
}

#mc_embed_signup .foot {
    align-items: start !important;
    width: 100% !important;
}

#mc_embed_signup .mc-field-group {
    min-width: 100%;
    min-height: auto;
}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    background-color: transparent !important;
    margin: 0 !important;
}

object.email {
    height: 2em;
    margin: -1em 0;
    vertical-align: middle;
}


/**
 * Presentación de la fuente como en site.css
 * PBI 1775
 */

#access-restricted .btn {
    text-transform: none;
}

#access-restricted .modal-body p {
    font: var(--dizo-body-font);
    font-size: 1.15rem;
    letter-spacing: var(--dizo-body-letter-spacing);
    text-wrap: pretty;
}






/** 
 * MD
 *      ·················|—————————————————>   MD           (767px < screen)
    ========================================================================== */


@media (min-width: 768px) {
    .header__main:has(.sign-in) > .px-3 {
        padding-inline: 0.85rem !important;
    }
}