/* ==========================================================================
   FAUNA Y FLORA — PÁGINA PRINCIPAL
   ========================================================================== */

.fauna-flora-page {
    --ff-dark: #022b26;
    --ff-primary: #046748;
    --ff-medium: #378b7b;
    --ff-light: #dce5df;
    --ff-accent: #2d8956;
    --ff-white: #ffffff;

    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow-x: clip;
}

/* ==========================================================
   AMOLADERO — SCROLLBAR INVISIBLE EN TODA LA WEB
   Mantiene el scroll funcional
   ========================================================== */

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Chrome, Safari, Edge */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Evitar reservar espacio para una barra oculta */
html,
html:has(#fauna-flora-modal) {
    scrollbar-gutter: auto;
}
/* ==========================================================================
   HERO
   ========================================================================== */

.fauna-flora-hero {
    position: relative;

    width: 100%;

    margin: 0 !important;

    min-height: clamp(
        260px,
        32vw,
        440px
    );

    background-color:
        var(--ff-primary);
}


.fauna-flora-hero__title {
    margin: 0 !important;

    color:
        var(--ff-white);

    font-family:
        var(
            --amoladero-font-heavy,
            sans-serif
        );

    font-size:
        clamp(
            3rem,
            6vw,
            6.5rem
        );

    font-weight: 900;

    line-height: 0.95;

    text-align: center;

    text-transform: uppercase;
}


/* ==========================================================================
   FRANJAS DE DESCARGA
   ========================================================================== */

.fauna-flora-download {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: none !important;

    margin: 0 !important;

    padding:
        clamp(
            28px,
            3vw,
            48px
        )
        24px;

    text-align: center;

    overflow: hidden;
}


.fauna-flora-download--flora {
    background:
        var(--ff-primary);
}


.fauna-flora-download--aves {
    background:
        #29a85b;
}


.fauna-flora-download__eyebrow {
    margin:
        0 0 3px !important;

    color:
        var(--ff-white);

    font-size:
        clamp(
            0.95rem,
            1.3vw,
            1.25rem
        );

    font-style: italic;

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;
}


.fauna-flora-download__title {
    margin:
        0 !important;

    color:
        var(--ff-white);

   

    font-size:
        clamp(
            2rem,
            3.4vw,
            4rem
        );

    font-weight: 900;

    line-height: 1;

    text-transform: uppercase;
}


/*
 * Por ahora mantenemos el botón funcional para edición.
 * Después, si queremos que TODO "GUÍA DE PLANTAS"
 * sea el enlace, podemos ocultar este botón visual.
 */

.fauna-flora-download__buttons {
    margin-top:
        16px !important;
}


.fauna-flora-download__button
.wp-block-button__link {
    min-width:
        190px;

    padding:
        12px 30px;

    border-radius:
        999px;

    background:
        var(--ff-accent);

    color:
        var(--ff-white);

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.fauna-flora-download__button
.wp-block-button__link:hover {
    background:
        var(--ff-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.16);
}


/* ==========================================================================
   CATÁLOGOS
   ========================================================================== */

.fauna-flora-catalog {
    position: relative;

    width: 100%;
    max-width: none !important;

    margin: 0 !important;
}


.fauna-flora-catalog--flora {
    padding:
        clamp(
            42px,
            6vw,
            90px
        )
        clamp(
            24px,
            6vw,
            100px
        );

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


.fauna-flora-catalog--aves {
    padding:
        clamp(
            44px,
            6vw,
            90px
        )
        clamp(
            24px,
            7vw,
            120px
        )
        clamp(
            70px,
            8vw,
            130px
        );

    background:
        var(--ff-primary);
}


/* ==========================================================================
   GRID BASE
   ========================================================================== */

.fauna-flora-grid {
    display: grid;

    width: 100%;

    margin: 0 auto;
}


/* ==========================================================================
   FLORA
   ========================================================================== */

.fauna-flora-grid--flora {
    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

    gap:
        clamp(
            28px,
            3vw,
            58px
        )
        clamp(
            14px,
            2vw,
            34px
        );

    max-width:
        1500px;
}


.fauna-flora-card {
    min-width: 0;
}


.fauna-flora-card--flora {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--ff-primary);

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;
}


.fauna-flora-card--flora
.fauna-flora-card__image-wrap {
    display: flex;

    align-items: flex-end;

    justify-content: center;

    width: 100%;

    aspect-ratio: 0.9;

    overflow: hidden;
}


.fauna-flora-card--flora
.fauna-flora-card__image {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    transform:
        scale(1);

    transition:
        transform
        260ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.fauna-flora-card--flora:hover
.fauna-flora-card__image {
    transform:
        scale(1.055);
}


.fauna-flora-card--flora
.fauna-flora-card__name {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        min(
            100%,
            170px
        );

    min-height:
        24px;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        var(--ff-primary);

    color:
        var(--ff-white);

    font-size:
        clamp(
            0.62rem,
            0.7vw,
            0.78rem
        );

    font-style: italic;

    line-height: 1.1;

    text-align: center;
}


/* ==========================================================================
   AVES
   ========================================================================== */

.fauna-flora-grid--aves {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        clamp(
            10px,
            1.2vw,
            18px
        );

    max-width:
        1120px;
}


.fauna-flora-card--aves {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio:
        1.22;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius:
        clamp(
            14px,
            1.5vw,
            24px
        );

    background:
        var(--ff-dark);

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    isolation: isolate;
}


.fauna-flora-card--aves
.fauna-flora-card__image-wrap {
    position: absolute;

    inset: 0;
}


.fauna-flora-card--aves
.fauna-flora-card__image {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        420ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        filter
        300ms
        ease;
}


.fauna-flora-card--aves:hover
.fauna-flora-card__image {
    transform:
        scale(1.06);

    filter:
        brightness(0.9);
}


.fauna-flora-card--aves
.fauna-flora-card__name {
    position: absolute;

    z-index: 3;

    right:
        10%;

    bottom:
        8px;

    left:
        10%;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height:
        24px;

    padding:
        4px 12px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    color:
        var(--ff-primary);

    font-size:
        clamp(
            0.72rem,
            0.9vw,
            0.9rem
        );

    font-style:
        italic;

    font-weight:
        700;

    line-height:
        1;

    text-align:
        center;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* ==========================================================================
   EMPTY
   ========================================================================== */

.fauna-flora-catalog__empty {
    grid-column:
        1 / -1;

    width:
        100%;

    margin:
        0;

    padding:
        50px 20px;

    color:
        inherit;

    text-align:
        center;
}


.fauna-flora-catalog--aves
.fauna-flora-catalog__empty {
    color:
        var(--ff-white);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (
    max-width: 1100px
) {

    .fauna-flora-grid--flora {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (
    max-width: 760px
) {

    .fauna-flora-grid--flora {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            28px
            14px;
    }


    .fauna-flora-grid--aves {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .fauna-flora-catalog--flora,
    .fauna-flora-catalog--aves {
        padding-right:
            18px;

        padding-left:
            18px;
    }

}


@media (
    max-width: 480px
) {

    .fauna-flora-grid--flora {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .fauna-flora-grid--aves {
        gap:
            8px;
    }


    .fauna-flora-card--aves {
        border-radius:
            12px;
    }


    .fauna-flora-card--aves
    .fauna-flora-card__name {
        right:
            7%;

        left:
            7%;

        font-size:
            0.67rem;
    }

}
/* ==========================================================================
   FAUNA Y FLORA
   FULL WIDTH / TEMPLATE NORMALIZATION
   ========================================================================== */

.fauna-flora-template-main {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: clip;
}


.fauna-flora-template-main
> .wp-block-post-content,

.fauna-flora-template-main
.wp-block-post-content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


.fauna-flora-page {
    --ff-dark: #022b26;
    --ff-primary: #046748;
    --ff-medium: #378b7b;
    --ff-light: #dce5df;
    --ff-accent: #2d8956;
    --ff-white: #ffffff;

    /*
     * Fuentes del proyecto.
     */
    --ff-font-display:
        "Emaro",
        "Nexa-Heavy",
        sans-serif;

    --ff-font-heavy:
        "Nexa-Heavy",
        "Emaro",
        sans-serif;

    position: relative;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: clip;
}


.fauna-flora-page.alignfull {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
}


/*
 * WordPress añade restricciones de layout a algunos
 * Group/Cover aunque tengan alignfull.
 */

.fauna-flora-page
> .wp-block-group.alignfull,

.fauna-flora-page
> .wp-block-cover.alignfull {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.fauna-flora-hero {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    min-height:
        clamp(
            300px,
            31vw,
            470px
        );

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background-color:
        var(--ff-primary);
}


.fauna-flora-hero
.wp-block-cover__image-background {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.fauna-flora-hero
.wp-block-cover__background {
    background:
        rgba(
            4,
            103,
            72,
            0.58
        ) !important;
}


.fauna-flora-hero
.wp-block-cover__inner-container {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;

    margin: 0;
    padding:
        clamp(
            60px,
            8vw,
            120px
        )
        24px;
}


.fauna-flora-hero__title {
    margin: 0 !important;

    color:
        var(--ff-white) !important;

    font-family:
        var(--ff-font-display) !important;

    font-size:
        clamp(
            3.2rem,
            6.2vw,
            7rem
        ) !important;

    font-weight: 900;

    line-height: 0.92;

    letter-spacing: 0;

    text-align: center;

    text-transform: uppercase;
}


/* ==========================================================================
   GUÍAS
   ========================================================================== */

.fauna-flora-download {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        clamp(
            25px,
            3vw,
            45px
        )
        clamp(
            20px,
            5vw,
            80px
        );

    overflow: hidden;

    text-align: center;
}


.fauna-flora-download--flora {
    background:
        var(--ff-primary) !important;
}


.fauna-flora-download--aves {
    background:
        #29a85b !important;
}


.fauna-flora-download__eyebrow {
    margin:
        0 0 3px !important;

    color:
        var(--ff-white) !important;

    font-family:
        var(--ff-font-heavy) !important;

    font-size:
        clamp(
            0.92rem,
            1.2vw,
            1.22rem
        );

    font-style: italic;

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;
}


.fauna-flora-download__title {
    margin: 0 !important;

    color:
        var(--ff-white) !important;

    font-family:
        var(--ff-font-heavy) !important;

    font-size:
        clamp(
            2rem,
            3.4vw,
            4rem
        ) !important;

    font-weight: 900;

    line-height: 0.95;

    text-transform: uppercase;
}


/* ==========================================================================
   ELIMINAR RESTRICCIONES GLOBALS DE WORDPRESS
   ========================================================================== */

.fauna-flora-page
.fauna-flora-download,

.fauna-flora-page
.fauna-flora-catalog,

.fauna-flora-page
.fauna-flora-grid {
    max-width: none;
}


.fauna-flora-page
:where(.wp-block-group.has-background) {
    padding-right: 0;
    padding-left: 0;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 782px) {

    .fauna-flora-hero {
        min-height:
            clamp(
                260px,
                72vw,
                400px
            );
    }


    .fauna-flora-hero
    .wp-block-cover__inner-container {
        padding:
            70px
            20px
            50px;
    }


    .fauna-flora-hero__title {
        font-size:
            clamp(
                2.8rem,
                13vw,
                5rem
            ) !important;
    }


    .fauna-flora-download {
        padding:
            24px
            16px;
    }


    .fauna-flora-download__title {
        font-size:
            clamp(
                1.7rem,
                7.5vw,
                2.6rem
            ) !important;
    }

}


/* ==========================================================================
   FAUNA Y FLORA — DESKTOP
   TIPOGRAFÍA 15PX
   Solo ordenador.
   No modifica tablet ni móvil.
   ========================================================================== */

@media (min-width: 1025px) {

    /* ==========================================================
       GUÍAS — TEXTO SUPERIOR
       ========================================================== */

    .fauna-flora-page
    .fauna-flora-download__eyebrow {
        font-size:
            15px !important;

        line-height:
            1.2;
    }


    /* ==========================================================
       BOTÓN DESCARGAR GUÍA
       ========================================================== */

    .fauna-flora-page
    .fauna-flora-download__button
    .wp-block-button__link {
        font-size:
            15px;

        line-height:
            1.25;
    }


    /* ==========================================================
       FLORA — NOMBRE DE LAS PLANTAS
       ========================================================== */

    .fauna-flora-page
    .fauna-flora-card--flora
    .fauna-flora-card__name {
        width:
            min(
                100%,
                200px
            );

        min-height:
            32px;

        padding:
            7px
            12px;

        font-size:
            15px !important;

        line-height:
            1.25;
    }


    /* ==========================================================
       AVES — NOMBRE DE LAS ESPECIES
       ========================================================== */

    .fauna-flora-page
    .fauna-flora-card--aves
    .fauna-flora-card__name {
        min-height:
            32px;

        padding:
            7px
            14px;

        font-size:
            15px !important;

        line-height:
            1.2;
    }


    /* ==========================================================
       MENSAJE DE CATÁLOGO VACÍO
       ========================================================== */

    .fauna-flora-page
    .fauna-flora-catalog__empty {
        font-size:
            15px;

        line-height:
            1.5;
    }

}

/* ==========================================================
   AMOLADERO — MOSAICO DINÁMICO DE AVES
   Exclusivo para Aves. Flora permanece intacta.
   ========================================================== */

.fauna-flora-grid--aves {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-auto-rows: clamp(160px, 17vw, 230px);
    grid-auto-flow: row;
    gap: clamp(10px, 1.2vw, 16px);
    max-width: 1120px;
    margin-inline: auto;
}

/* Todas las tarjetas conservan su imagen y etiqueta */
.fauna-flora-grid--aves > .fauna-flora-card--aves {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

/* Fila 1: tres anchos diferentes */
.fauna-flora-grid--aves > :nth-child(9n + 1) {
    grid-column: span 7;
}

.fauna-flora-grid--aves > :nth-child(9n + 2) {
    grid-column: span 8;
}

.fauna-flora-grid--aves > :nth-child(9n + 3) {
    grid-column: span 9;
}

/* Fila 2 */
.fauna-flora-grid--aves > :nth-child(9n + 4) {
    grid-column: span 9;
}

.fauna-flora-grid--aves > :nth-child(9n + 5) {
    grid-column: span 6;
}

.fauna-flora-grid--aves > :nth-child(9n + 6) {
    grid-column: span 9;
}

/* Fila 3 */
.fauna-flora-grid--aves > :nth-child(9n + 7) {
    grid-column: span 9;
}

.fauna-flora-grid--aves > :nth-child(9n + 8) {
    grid-column: span 8;
}

.fauna-flora-grid--aves > :nth-child(9n + 9) {
    grid-column: span 7;
}

/* Centrar una tarjeta si queda sola en la última fila */
.fauna-flora-grid--aves > :last-child:nth-child(3n + 1) {
    grid-column: 9 / span 8;
}

/* Tablet y móvil: dos columnas equilibradas */
@media (max-width: 760px) {
    .fauna-flora-grid--aves {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(145px, 30vw, 230px);
        gap: 10px;
    }

    .fauna-flora-grid--aves > .fauna-flora-card--aves {
        grid-column: auto !important;
    }
}

@media (max-width: 480px) {
    .fauna-flora-grid--aves {
        grid-auto-rows: clamp(135px, 37vw, 185px);
        gap: 8px;
    }
}

/* ==========================================================
   QUEBRADA EL AMOLADERO — FAUNA Y FLORA
   TIPOGRAFÍA NEXA — FRANJAS DE DESCARGA

   Afecta exclusivamente:
   - DESCARGAR
   - GUÍA DE PLANTAS
   - GUÍA DE AVES
   - Botones DESCARGAR GUÍA

   No modifica tamaños, colores, márgenes ni estructura.
   ========================================================== */

/* DESCARGAR — texto superior */

.fauna-flora-page
.fauna-flora-download
.fauna-flora-download__eyebrow {
    font-family:
        "Nexa-Heavy",
        "Nexa Heavy",
        Arial,
        sans-serif !important;
}

/* GUÍA DE PLANTAS / GUÍA DE AVES */

.fauna-flora-page
.fauna-flora-download
.fauna-flora-download__title {
    font-family:
        "Nexa-Heavy",
        "Nexa Heavy",
        Arial,
        sans-serif !important;
}

/* BOTONES DESCARGAR GUÍA */

.fauna-flora-page
.fauna-flora-download
.fauna-flora-download__button
.wp-block-button__link {
    font-family:
        "Nexa-Heavy",
        "Nexa Heavy",
        Arial,
        sans-serif !important;
}

/* ==========================================================
   AMOLADERO — FAUNA Y FLORA
   CENTRADO DE FRANJAS DE DESCARGA

   Exclusivo para:
   - GUÍA DE PLANTAS
   - GUÍA DE AVES

   Conserva tipografía Nexa, tamaños, colores y fondos.
   ========================================================== */

/* Centrar contenido de ambas franjas */
.fauna-flora-page .fauna-flora-download {
    text-align: center !important;
}

/* Texto superior: DESCARGAR */
.fauna-flora-page .fauna-flora-download .fauna-flora-download__eyebrow {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Títulos: GUÍA DE PLANTAS / GUÍA DE AVES */
.fauna-flora-page .fauna-flora-download .fauna-flora-download__title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Contenedor de botones */
.fauna-flora-page .fauna-flora-download .fauna-flora-download__buttons {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Alineación del texto interior del botón */
.fauna-flora-page .fauna-flora-download .fauna-flora-download__button .wp-block-button__link {
    text-align: center !important;
}