/* ========================================================================== 
   FAUNA Y FLORA — MODAL PROFUNDO / OPTIMIZADO
   ========================================================================== */

@font-face {
    font-family: "Emaro";
    src: url("https://quebradaelamoladero.com/wp-content/uploads/fonts/Emaro.otf?v=20260928") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
decorativos
@font-face {
    font-family: "Nexa";
    src: url("https://quebradaelamoladero.com/wp-content/uploads/fonts/Nexa-Heavy.ttf?v=20260928") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

#fauna-flora-modal {
    --ff-deep: #00594f;
    --ff-primary: #046748;
    --ff-medium: #378b7b;
    --ff-accent: #2d8956;
    --ff-light: #dce5df;
    --ff-white: #ffffff;
    --ff-text: #073f36;
--ff-footer-height:
    clamp(
        62px,
        7vw,
        90px
    );
    --ff-display: "Emaro", var(--amoladero-font-display, sans-serif);
    --ff-heavy: "Nexa", var(--amoladero-font-heavy, Arial, sans-serif);
    --ff-body: var(--amoladero-font-body, Arial, Helvetica, sans-serif);

    position: fixed;
    z-index: 99990;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-synthesis: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}

#fauna-flora-modal[hidden],
#fauna-flora-modal [hidden] {
    display: none !important;
}

#fauna-flora-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#fauna-flora-modal .fauna-flora-modal__backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: rgba(2, 43, 38, 0.95);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* DIALOG */
#fauna-flora-modal .fauna-flora-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(94vw, 1280px);
    height: min(88dvh, 760px);
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    outline: 0;
    background: var(--ff-light);
    box-shadow: 0 28px 80px rgba(0, 45, 38, 0.28);
    transform: translateY(12px) scale(0.99);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

#fauna-flora-modal.is-open .fauna-flora-modal__dialog {
    transform: translateY(0) scale(1);
}

/* CLOSE */
#fauna-flora-modal .fauna-flora-modal__close {
    position: absolute;
    z-index: 60;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ff-accent);
    color: var(--ff-white);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 10px 24px rgba(0, 56, 47, 0.18);
    transition: transform 180ms ease, background 180ms ease;
}

#fauna-flora-modal .fauna-flora-modal__close span {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-1px);
}

#fauna-flora-modal .fauna-flora-modal__close:hover {
    background: var(--ff-primary);
    transform: scale(1.06);
}

#fauna-flora-modal .fauna-flora-modal__close:active {
    transform: scale(0.96);
}

#fauna-flora-modal .fauna-flora-modal__close:focus-visible {
    outline: 3px solid rgba(255,255,255,.95);
    outline-offset: 4px;
}

/* CONTENT */
#fauna-flora-modal .fauna-flora-modal__content {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(320px, 42%) minmax(0, 58%);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--ff-light);
}

/* Decorative SVG strip across the bottom */
/* ==========================================================================
   CENEFA ORIGINAL — DESKTOP
   SVG ORIGINAL 1920 × 134
   ========================================================================== */

#fauna-flora-modal
.fauna-flora-modal__content::after {
    content: "";

    position: absolute;

    z-index: 30;

    left: 0;

    right: 0;

    bottom: 0;

    display: block;

    width: 100%;

    /*
     * Conservamos aproximadamente la proporción
     * real del SVG 1920 × 134.
     */
    height:
        clamp(
            62px,
            7vw,
            90px
        );

    pointer-events: none;

    background-color:
        var(--ff-light);

    background-image:
        url("../../images/decorativos/fauna-flora-patron.svg?v=20261018-5");

    /*
     * El SVG ya contiene la franja completa,
     * por eso NO debemos repetirlo.
     */
    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    /*
     * 100% de ancho y altura automática.
     * Así NO deformamos el SVG.
     */
    background-size:
        100%
        auto;
}

/* GALLERY */
#fauna-flora-modal .fauna-flora-modal__gallery {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 38px 42px calc(var(--ff-footer-height) + 22px);
    overflow: hidden;
    background: var(--ff-light);
}

#fauna-flora-modal .fauna-flora-modal__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 390px);
    aspect-ratio: 3 / 4;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: rgba(4, 103, 72, 0.07);
    box-shadow: none;
}

#fauna-flora-modal .fauna-flora-modal__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
}

#fauna-flora-modal .fauna-flora-modal__empty-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 103, 72, 0.06);
    color: rgba(4, 103, 72, 0.42);
    font-family: var(--ff-heavy);
    font-size: .9rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

#fauna-flora-modal .fauna-flora-modal__arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    color: var(--ff-primary);
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 5px 16px rgba(0, 55, 46, .12);
    transition: background 160ms ease, transform 160ms ease;
}

#fauna-flora-modal .fauna-flora-modal__arrow span {
    font-family: Arial, sans-serif;
    font-size: 1.9rem;
    font-weight: 300;
    line-height: 1;
}

#fauna-flora-modal .fauna-flora-modal__arrow--prev { left: 10px; }
#fauna-flora-modal .fauna-flora-modal__arrow--next { right: 10px; }

#fauna-flora-modal .fauna-flora-modal__arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.07);
}

#fauna-flora-modal .fauna-flora-modal__arrow:active {
    transform: translateY(-50%) scale(.96);
}

#fauna-flora-modal .fauna-flora-modal__counter {
    position: absolute;
    z-index: 11;
    right: 12px;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0,89,79,.72);
    color: #fff;
    font-family: var(--ff-heavy);
    font-size: .68rem;
}

#fauna-flora-modal .fauna-flora-modal__caption {
    width: min(100%, 390px);
    margin-top: 8px;
    color: var(--ff-primary);
    font-family: var(--ff-body);
    font-size: .76rem;
    line-height: 1.35;
}

#fauna-flora-modal .fauna-flora-modal__credit {
    width: min(100%, 390px);
    margin-top: 7px;
    padding: 6px 10px;
    border-radius: 4px;
    background: #5dae73;
    color: #fff;
    font-family: var(--ff-heavy);
    font-size: .72rem;
    line-height: 1.25;
    text-align: center;
}

/* INFORMATION */
#fauna-flora-modal .fauna-flora-modal__information {
    position: relative;
    z-index: 3;
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 42px 62px calc(var(--ff-footer-height) + 20px) 42px;
    overflow: hidden;
    background: var(--ff-light);
    color: var(--ff-text);
}

/* Soft botanical decoration on the right */
#fauna-flora-modal
.fauna-flora-modal__information {
    position: relative;
    isolation: isolate;
}


#fauna-flora-modal
.fauna-flora-modal__information::before {
    content: "";

    position: absolute;

    z-index: 1;

    top: 0;

    right: 0;

    width: 68%;

    height: calc(
        100% -
        var(--ff-footer-height)
    );

    pointer-events: none;

    opacity: 0.22;

    background-image:
        url("../../images/decorativos/fauna-flora-lateral.svg?v=20261018-2");

    background-repeat:
        no-repeat;

    background-position:
        right center;

    background-size:
        contain;
}


/* El contenido siempre queda por encima del SVG */

#fauna-flora-modal
.fauna-flora-modal__header,
#fauna-flora-modal
.fauna-flora-modal__scroll {
    position: relative;

    z-index: 2;
}

#fauna-flora-modal .fauna-flora-modal__header {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    margin: 0 0 12px;
    padding: 0 72px 0 0;
}

#fauna-flora-modal .fauna-flora-modal__eyebrow {
    margin: 0;
    color: var(--ff-primary);
    font-family: var(--ff-display);
    font-size: clamp(2.75rem, 4.4vw, 4.5rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: 0;
    text-transform: uppercase;
}

#fauna-flora-modal .fauna-flora-modal__title,
#fauna-flora-modal .fauna-flora-modal__scientific {
    display: none !important;
}

/* SCROLL DESKTOP */
#fauna-flora-modal .fauna-flora-modal__scroll {
    position: relative;
    z-index: 4;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 18px 12px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(4,103,72,.45) transparent;
}

#fauna-flora-modal .fauna-flora-modal__scroll::-webkit-scrollbar { width: 6px; }
#fauna-flora-modal .fauna-flora-modal__scroll::-webkit-scrollbar-track { background: transparent; }
#fauna-flora-modal .fauna-flora-modal__scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(4,103,72,.45);
}

/* GENERAL DATA — reference order: científico, común, familia */
#fauna-flora-modal .fauna-flora-modal__section[data-section="general"] {
    display: flex;
    flex-direction: column;
    margin: 0 0 12px;
}

#fauna-flora-modal .fauna-flora-modal__summary-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0 0 1px;
    color: var(--ff-primary);
    font-family: var(--ff-heavy);
    font-size: clamp(.82rem, .88vw, .94rem);
    line-height: 1.16;
}

#fauna-flora-modal .fauna-flora-modal__section[data-section="general"] .fauna-flora-modal__summary-row:nth-child(1) { order: 2; }
#fauna-flora-modal .fauna-flora-modal__section[data-section="general"] .fauna-flora-modal__summary-row:nth-child(2) { order: 1; }
#fauna-flora-modal .fauna-flora-modal__section[data-section="general"] .fauna-flora-modal__summary-row:nth-child(3) { order: 3; }

#fauna-flora-modal .fauna-flora-modal__summary-row strong {
    flex: 0 0 auto;
    color: var(--ff-primary);
    font-family: var(--ff-heavy);
    font-weight: 800;
}

#fauna-flora-modal .fauna-flora-modal__summary-row span {
    color: var(--ff-primary);
    font-family: var(--ff-body);
    font-weight: 500;
}

#fauna-flora-modal .fauna-flora-modal__section[data-section="general"] .fauna-flora-modal__summary-row:nth-child(2) span {
    font-style: italic;
}

/* INFORMATION BLOCKS */
#fauna-flora-modal .fauna-flora-modal__section {
    margin: 0;
}

#fauna-flora-modal .fauna-flora-modal__text-block {
    margin: 0 0 9px;
}

#fauna-flora-modal .fauna-flora-modal__text-block h3 {
    margin: 0 0 3px;
    color: var(--ff-primary);
    font-family: var(--ff-heavy);
    font-size: clamp(.72rem, .78vw, .82rem);
    font-weight: 800;
    line-height: 1.12;
}

#fauna-flora-modal .fauna-flora-modal__text-block p {
    margin: 0;
    color: var(--ff-text);
    font-family: var(--ff-body);
    font-size: clamp(.67rem, .73vw, .77rem);
    font-weight: 500;
    line-height: 1.32;
    white-space: pre-line;
}

/* Datos curiosos = green card with white type */
#fauna-flora-modal .fauna-flora-modal__text-block:has([data-field="datos_curiosos"]) {
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 11px 14px 12px;
    border-radius: 8px;
    background: var(--ff-deep);
    color: var(--ff-white);
}

#fauna-flora-modal .fauna-flora-modal__text-block:has([data-field="datos_curiosos"]) h3,
#fauna-flora-modal .fauna-flora-modal__text-block:has([data-field="datos_curiosos"]) p {
    color: var(--ff-white);
}

#fauna-flora-modal .fauna-flora-modal__text-block:has([data-field="datos_curiosos"]) p {
    font-size: clamp(.65rem, .7vw, .74rem);
    line-height: 1.3;
}

/* LOADING / ERROR */
#fauna-flora-modal .fauna-flora-modal__loading,
#fauna-flora-modal .fauna-flora-modal__error {
    position: absolute;
    z-index: 50;
    top: 50%;
    left: 50%;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-family: var(--ff-heavy);
    transform: translate(-50%, -50%);
}

#fauna-flora-modal .fauna-flora-modal__loader {
    display: block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: faunaFloraSpin .7s linear infinite;
}

@keyframes faunaFloraSpin {
    to { transform: rotate(360deg); }
}

/* BODY LOCK */
html.fauna-flora-modal-open,
body.fauna-flora-modal-open {
    overflow: hidden !important;
}



/* ==========================================================================
   DESKTOP — LEGIBILIDAD MODAL
   Solo ordenador. No modifica tablet ni móvil.
   ========================================================================== */

@media (min-width: 1025px) {

    /* Datos principales:
       Nombre científico / común / familia
    */
    #fauna-flora-modal
    .fauna-flora-modal__summary-row {
        font-size:
            clamp(
                0.95rem,
                0.95vw,
                1.05rem
            );

        line-height:
            1.22;
    }


    /* Títulos:
       Distribución, Descripción, Usos...
    */
    #fauna-flora-modal
    .fauna-flora-modal__text-block h3 {
        font-size:
            clamp(
                0.88rem,
                0.88vw,
                0.98rem
            );

        line-height:
            1.2;
    }


    /* Texto general */
    #fauna-flora-modal
    .fauna-flora-modal__text-block p {
        font-size:
            clamp(
                0.79rem,
                0.80vw,
                0.88rem
            );

        line-height:
            1.42;
    }


    /* Datos curiosos */
    #fauna-flora-modal
    .fauna-flora-modal__text-block:has(
        [data-field="datos_curiosos"]
    )
    p {
        font-size:
            clamp(
                0.77rem,
                0.78vw,
                0.85rem
            );

        line-height:
            1.4;
    }


    /* Un poco más de separación entre bloques */
    #fauna-flora-modal
    .fauna-flora-modal__text-block {
        margin-bottom:
            11px;
    }


    #fauna-flora-modal
    .fauna-flora-modal__section[data-section="general"] {
        margin-bottom:
            15px;
    }

}

/* TABLET */
@media (max-width: 1024px) {
    #fauna-flora-modal {
        --ff-footer-height: 58px;
        padding: 14px;
    }

    #fauna-flora-modal .fauna-flora-modal__dialog {
        width: 100%;
        height: min(94dvh, 760px);
    }

    #fauna-flora-modal .fauna-flora-modal__content {
        grid-template-columns: minmax(280px, 40%) minmax(0, 60%);
    }

    #fauna-flora-modal .fauna-flora-modal__gallery {
        padding: 34px 26px calc(var(--ff-footer-height) + 18px);
    }

    #fauna-flora-modal
.fauna-flora-modal__information {
    position:
        relative;

    isolation:
        isolate;
}


#fauna-flora-modal
.fauna-flora-modal__information::before {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        -2%;

    right:
        -5%;

    width:
        72%;

    height:
        calc(
            100% -
            var(--ff-footer-height)
        );

    pointer-events:
        none;

    /*
     * IMPORTANTE:
     * El SVG ya trae sus propias transparencias.
     * No volvemos a reducirlas desde CSS.
     */
    opacity:
        1;

    background-image:
        url("../../images/decorativos/fauna-flora-lateral.svg?v=20261018-3");

    background-repeat:
        no-repeat;

    background-position:
        right center;

    background-size:
        auto
        108%;
}


#fauna-flora-modal
.fauna-flora-modal__header,
#fauna-flora-modal
.fauna-flora-modal__scroll {
    position:
        relative;

    z-index:
        2;
}

    #fauna-flora-modal .fauna-flora-modal__eyebrow {
        font-size: clamp(2.4rem, 5vw, 3.4rem);
    }
}
/* ==========================================================================
   TABLET — CENEFA COMPLETA
   ========================================================================== */

@media (
    min-width:
        768px
) and (
    max-width:
        1024px
) {

    #fauna-flora-modal
    .fauna-flora-modal__content::after {
        content:
            "";

        position:
            absolute;

        z-index:
            30;

        left:
            0;

        right:
            0;

        bottom:
            0;

        display:
            block;

        width:
            100%;

        /*
         * Conservamos la proporción real:
         * 1920 × 134
         */
        height:
            auto;

        aspect-ratio:
            1920 / 134;

        pointer-events:
            none;

        background-color:
            var(--ff-light);

        background-image:
    
            url("../../images/decorativos/fauna-flora-patron.svg?v=20261018-6");

        background-repeat:
            no-repeat;

        background-position:
            center bottom;

        background-size:
            100%
            100%;
    }

}
/* MOBILE — one real scroll surface */
@media (max-width: 767px) {
    
    
    
    #fauna-flora-modal {
        --ff-footer-height: 48px;
        align-items: stretch;
        padding: 0;
    }

    #fauna-flora-modal .fauna-flora-modal__backdrop {
        background: var(--ff-light);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #fauna-flora-modal .fauna-flora-modal__dialog {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 0;
        background: var(--ff-light);
        box-shadow: none;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #fauna-flora-modal .fauna-flora-modal__content {
        display: block !important;
        width: 100%;
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;
        padding: 0;
        background: var(--ff-light);
    }

  #fauna-flora-modal
.fauna-flora-modal__content::after {
    content: "";

    position:
        relative;

    z-index:
        10;

    display:
        block;

    left:
        auto;

    right:
        auto;

    bottom:
        auto;

    width:
        100%;

    /*
     * SVG original:
     * 1920 × 134
     *
     * Dejamos que su propia proporción
     * determine la altura.
     */
    height:
        auto;

    aspect-ratio:
        1920 / 134;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    pointer-events:
        none;

    background-color:
        var(--ff-light);

    background-image:
        url("../../images/decorativos/fauna-flora-patron.svg?v=20261018-6");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    /*
     * Muestra TODO el SVG.
     * No recorta y no repite.
     */
    background-size:
        100%
        100%;
}

    #fauna-flora-modal .fauna-flora-modal__gallery {
        min-height: 0;
        padding: 72px 20px 20px;
        overflow: visible;
        background: var(--ff-light);
    }

    #fauna-flora-modal .fauna-flora-modal__media {
        width: min(100%, 330px);
        aspect-ratio: 3 / 4;
        flex: none;
        background: rgba(4,103,72,.06);
    }

    #fauna-flora-modal .fauna-flora-modal__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    #fauna-flora-modal .fauna-flora-modal__caption,
    #fauna-flora-modal .fauna-flora-modal__credit {
        width: min(100%, 330px);
    }

    #fauna-flora-modal .fauna-flora-modal__information {
        display: block !important;
        min-height: 0;
        padding: 20px 24px 30px;
        overflow: visible !important;
        background: var(--ff-light);
    }

    #fauna-flora-modal .fauna-flora-modal__information::before {
        top: 0;
        right: -55px;
        width: 180px;
        height: 100%;
        opacity: .065;
    }

    #fauna-flora-modal .fauna-flora-modal__header {
        margin-bottom: 14px;
        padding: 0 44px 0 0;
    }

    #fauna-flora-modal .fauna-flora-modal__eyebrow {
        font-size: clamp(2.4rem, 12vw, 3.4rem);
        line-height: .92;
    }

    #fauna-flora-modal .fauna-flora-modal__scroll {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        min-height: 0;
        padding: 0;
        overflow: visible !important;
        overscroll-behavior: auto;
    }

    #fauna-flora-modal .fauna-flora-modal__summary-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 3px;
        font-size: .89rem;
        line-height: 1.25;
    }

    #fauna-flora-modal .fauna-flora-modal__text-block {
        margin-bottom: 16px;
    }

    #fauna-flora-modal .fauna-flora-modal__text-block h3 {
        margin-bottom: 5px;
        font-size: .94rem;
    }

    #fauna-flora-modal .fauna-flora-modal__text-block p {
        font-size: .91rem;
        line-height: 1.52;
    }

    #fauna-flora-modal .fauna-flora-modal__text-block:has([data-field="datos_curiosos"]) {
        margin-top: 12px;
        padding: 14px 16px 15px;
        border-radius: 8px;
    }

    #fauna-flora-modal .fauna-flora-modal__text-block:has([data-field="datos_curiosos"]) p {
        font-size: .86rem;
        line-height: 1.48;
    }

    #fauna-flora-modal .fauna-flora-modal__close {
        position: fixed;
        top: max(14px, env(safe-area-inset-top));
        right: 14px;
        width: 50px;
        height: 50px;
        z-index: 99995;
    }

    #fauna-flora-modal .fauna-flora-modal__arrow {
        width: 44px;
        height: 44px;
    }

    #fauna-flora-modal .fauna-flora-modal__arrow--prev { left: 8px; }
    #fauna-flora-modal .fauna-flora-modal__arrow--next { right: 8px; }
}

@media (max-width: 480px) {
    #fauna-flora-modal .fauna-flora-modal__gallery {
        padding: 68px 14px 18px;
    }

    #fauna-flora-modal .fauna-flora-modal__media,
    #fauna-flora-modal .fauna-flora-modal__caption,
    #fauna-flora-modal .fauna-flora-modal__credit {
        width: min(100%, 315px);
    }

    #fauna-flora-modal .fauna-flora-modal__information {
        padding: 18px 20px 26px;
    }

    #fauna-flora-modal .fauna-flora-modal__eyebrow {
        font-size: clamp(2.2rem, 12vw, 3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    #fauna-flora-modal,
    #fauna-flora-modal .fauna-flora-modal__dialog,
    #fauna-flora-modal .fauna-flora-modal__arrow,
    #fauna-flora-modal .fauna-flora-modal__close {
        transition: none !important;
    }

    #fauna-flora-modal .fauna-flora-modal__loader {
        animation: none;
    }
}