/* @import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Macondo&family=Macondo+Swash+Caps&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Macondo&family=Macondo+Swash+Caps&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Baloo+Bhaijaan+2:wght@400..800&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Macondo&family=Macondo+Swash+Caps&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
/* <weight>: Use a value from 400 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */
/* .cinzel-<uniquifier> {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
/* .cinzel-decorative-regular {
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  font-style: normal;
}

.cinzel-decorative-bold {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-style: normal;
}

.cinzel-decorative-black {
  font-family: "Cinzel Decorative", serif;
  font-weight: 900;
  font-style: normal;
} */


@import url('https://fonts.googleapis.com/css2?family=Diplomata&display=swap');
/* .diplomata-regular {
  font-family: "Diplomata", serif;
  font-weight: 400;
  font-style: normal;
} */


@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
/* <weight>: Use a value from 300 to 900
<uniquifier>: Use a unique and descriptive class name */
/* .playfair-<uniquifier> {
  font-family: "Playfair", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
} */



/* :root, */
:root.gray {
    --background1: #fefdfb;  
    --background2: #002b36;  
    --background3: #99cc00;  
    --background4: #f1f3f0;  
    --background4-shadow: #969491;  
    --background5: #d1d0cc;  
    --background6: #767171;  
    /* --background7: #e8e8e8; */
    --background7: #ececec;
    --background8: #dcd9dd;  
    --background9: #d9d2c4;  
    --background-image1: url("/static/btqst02_02shc_images/paisley_002_gray.jpg");   
    /* --text-card-title1: #a3790e;
    --text-card-title1-hover: #d19a10; */
    --text-card-title1: #32053d;
    --text-card-title1-shadow: 1px 1px #cce0fb;
    --text-card-title1-hover: #7b7b7c;
    --text-card-descr1: #1c0323;
    --text-discr1: #7a7a7a;
    --text-color-detail-title: #524b54;
    --font-card-title: "ADLaM Display", system-ui;
    /* --font-card-descr: "Crimson Pro", serif; */
    /* --font-card-descr: "Philosopher", sans-serif; */
    --font-card-descr: "Baloo Bhaijaan 2", sans-serif;
    /* --font-themes-title: "Pacifico", cursive; */
    --font-themes-title: "Dancing Script", cursive;
    --font-themes-title: "Space Grotesk", sans-serif;
    --font-survey-field-content: "Montserrat", sans-serif;
    --font-survey-field-price: "Noto Serif", serif;
    --font-detail-price: "Merriweather", serif;
    --font-detail-count: "Poppins",sans-serif;
    --font-legend-label: "Montserrat", serif;
    --font-clasific-symbols: #d4af37;
    
}

:root.rose {
    --background1: #fefdfb; 
    --background2: #002b36;  
    --background3: #99cc00;  
    --background4: #f9f2fa;  
    --background4-shadow: #969491;  
    --background5: #f9dcfc;  
    --background6: #767171;  
    --background7: #efcef2;  
    --background8: #fbf0fc;  
    --background9: #d9d2c4;  
    --background-image1: url("/static/btqst02_02shc_images/paisley_008.webp");   
    /* --text-card-title1: #a3790e;
    --text-card-title1-hover: #d19a10; */
    --text-card-title1: #32053d;
    --text-card-title1-shadow: 1px 1px #f8ba63;
    --text-card-title1-hover: #7b1595;
    --text-card-descr1: #1c0323;
    --text-color-detail-title: #48055a;
    --font-card-title: "ADLaM Display", system-ui;
    /* --font-card-descr: "Crimson Pro", serif; */
    /* --font-card-descr: "Philosopher", sans-serif; */
    --font-card-descr: "Baloo Bhaijaan 2", sans-serif;
    /* --font-themes-title: "Pacifico", cursive; */
    --font-themes-title: "Dancing Script", cursive;
    --font-clasific-symbols: #d4af37;
    
}

:root,
:root.beige {
    --background1: #fefdfb;  
    --background2: #002b36;  
    --background3: #99cc00;
    --background4: #eeeae3;  
    --background5: #e9ddc5;  
    --background7: #d9d2c4;  
    --background8: #f3f2f0;
    --background9: #d9d2c4;
    /* --background-image1: url("/static/btqst02_02shc_images/paisley_007.webp");    */
    /* --background-image1: url("/static/btqst02_02shc_images/paisley_007_a.webp");    */
    /* --background-image1: url("/static/btqst02_02shc_images/paisley_007_a_80.webp");    */
    --background-image1: url("/static/btqst02_02shc_images/paisley_007_a_100.webp");   
    /* --background-image1: url("/static/btqst02_02shc_images/paisley_007_b.webp");    */
    /* --background-image1: url("/static/btqst02_02shc_images/paisley_007_d.webp");    */
    --text-card-title1: #7b6d53;
    --text-card-title1-shadow: 1px 1px #f5df66;
    --text-card-title1-hover: #c1a923; /*hover*/
    --text-card-descr1: #363127;
    --text-discr1: #7a7a7a;
    --text-color-detail-title: #5e4514;
    /* --text-color: #123; */
    --font-card-title: "ADLaM Display", system-ui;
    /* --font-card-descr: "Crimson Pro", serif; */
    /* --font-card-descr: "Philosopher", sans-serif; */
    --font-card-descr: "Baloo Bhaijaan 2", sans-serif;
    /* --font-themes-title: "Dancing Script", cursive; */
    /* --font-themes-title: "Bruno Ace SC", sans-serif; */
    /* --font-themes-title: "Pacifico", cursive; */
    --font-themes-title: "Dancing Script", cursive;
    --font-themes-title: "Space Grotesk", sans-serif;
    --font-survey-field-content: "Montserrat", sans-serif;
    --font-survey-field-price: "Noto Serif", serif;
    --font-detail-price: "Merriweather", serif;
    --font-detail-count: "Poppins",sans-serif;
    --font-legend-label: "Montserrat", serif;
    --font-clasific-symbols: #d4af37;
    
}

:root.blue {
    --background4: #f1f5fa;  
    --background5: #dfedfb;  
    --background7: #c3e0fd;  
    --background8: #f4f7fa;  
    --background-image1: url("/static/btqst02_02shc_images/paisley_002.jpg");   
    --text-card-title1: #1b4d80;
    --text-card-title1-shadow: 1px 1px #baebf5;
    --text-card-title1-hover: #4a8bcc; /*hover*/
    --text-card-descr1: #12304e;
    --text-color-detail-title: #144678;
    --text-color: #123;
    --font-themes-title: "Dancing Script", cursive;
    --font-themes-title: "Zen Tokyo Zoo", system-ui;
    --font-clasific-symbols: #d4af37;
}

:root.green {
    --background4: #f1f3f0;  
    --background5: #dff1d7;  
    --background7: #c5dbc4;  
    --background8: #f3f8f1;  
    --background-image1: url("/static/btqst02_02shc_images/paisley_001.jpg");   
    --text-card-title1: #356733;
    --text-card-title1-shadow: 1px 1px #d9e311;
    --text-card-title1-hover: #59ba56; /*hover*/
    --text-card-descr1: #1f3b1e;
    --text-color-detail-title: #0b4609;
    --text-color: #123;
    --font-themes-title: "Dancing Script", cursive;
    --font-themes-title: "Special Elite", system-ui;
    --font-clasific-symbols: #d4af37;
}

:root.yellow {
    --background4: #f1f3f0;  
    --background5: #f4f961;  
    --background7: #ffea00;  
    --background8: #f2f1cb;  
    --background-image1: url("/static/btqst02_02shc_images/paisley_008_yellow.jpg");   
    --text-card-title1: #937603;
    --text-card-title1-shadow: 1px 1px #d9e311;
    --text-card-title1-hover: #ffb700; /*hover*/
    --text-card-descr1: #1f3b1e;
    --text-color-detail-title: #866504;
    --text-color: #123;
    --font-themes-title: "Dancing Script", cursive;
    --font-themes-title: "Special Elite", system-ui;
    --font-clasific-symbols: #d4af37;
}

:root.brown {
    --background4: #f1f3f0;  
    --background5: #895f05;  
    --background7: #493302;  
    --background8: #c28706;  
    /* --background-image1: url("/static/btqst02_02shc_images/bck_brown.jpg");    */
    --background-image1: url("/static/btqst02_02shc_images/paisley_001_carmelita.jpg");   
    --text-card-title1: #937603;
    --text-card-title1-shadow: 1px 1px #d9e311;
    --text-card-title1-hover: #ffb700; /*hover*/
    --text-card-descr1: #1f3b1e;
    --text-color-detail-title: #866504;
    --text-color: #123;
    --font-themes-title: "Dancing Script", cursive;
    --font-themes-title: "Special Elite", system-ui;
    --font-clasific-symbols: #d4af37;
}


* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;         /* If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now */
    font-family: Inter,Helvetica,Arial,sans-serif;
}

/* ++++++++++ end: RESPONSVIE BEHAVIOUR banner +++++++++++ */

.themes {
    display: flex;
    /* flex-direction: row; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.themes-title {
    display: flex;
    flex-direction: row;
    font-size: 14px;
    font-family: var(--font-themes-title);
    font-weight: bold;
    padding-right: 15px;
    text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.7);
}

.themes-btns {
    display: flex;
    flex-direction: row;
	/* position:fixed; */
	width:220px;
	height:20px;
	/* top:60px; */
	/* right:20px; */
	/* background: #356733; */
	background: var(--background7);
	border-radius:6px;
    align-items: center;
    justify-content: center;
    box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5);
    /* writing-mode: vertical-rl; */
}

    .theme-0 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #b5b5b5;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-0:hover {
        background-color: #474747;
        color: #ffffff;
    }

    .theme-1 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #efcef2;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-1:hover {
        background-color: #e84cf7;
    }

    .theme-2 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #d9d2c4;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-2:hover {
        background-color: #cfa040;
    }
    .theme-3 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #abc9fb;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-3:hover {
        background-color: #3b80f7;
    }
    .theme-4 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #c5dbc4;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-4:hover {
        background-color: #51da4a;
    }
    .theme-5 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #f2f1cb;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-5:hover {
        background-color: #f7f323;
    }
    .theme-6 {
        display: flex;
        flex-direction: row;
	    /* position: fixed; */
	    width: 35px;
        height: 15px;
        /* background-color: var(--background7); */
        background-color: #ba986d;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 8px;
        font-weight: bold;
        align-items: center;
        justify-content: center;
    }
    .theme-6:hover {
        background-color: #75501f;
    }

.theme p{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    /* font-style: italic; */
}
/* ######################################################### */


body.grad1 {
    min-height: 100vh;
    width: 100%;
    /* background: var(--background1); */
    /* background-image: url("/static/btqst02_02shc_images/paisley_007.webp"); */
    background-image: var(--background-image1);
    opacity: 1;
}

/* body.grad1 {
    z-index: 0;
    background-image: url("/static/btqst02_02shc_images/paisley_005.jpg");
    opacity: 0.8;
} */

#logo-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    /* line-height: 20px; */
    align-items: center;
    justify-content: space-between;
    background: var(--background7);
    /* background: var(--background9); */
    opacity: 0.8;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
    /* background:#f6f5f3; */
    position: sticky;       /* fija la barra d navegación al comienzo de la página */
    top: 0px;                 /* margen del borde superior al límite de fijado de la barra de navegación */
    z-index: 2;
}

    #starting-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 20px;
        align-items: center;
    }

        /* #logo-div{} */


        #nav-div {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            #lupa-list {
                width: 35px;
                height: 35px;
            }

            .nav {
                margin-left: 10px;
                /* font-size: 16px; */
            }

                #lista_categorias {
                    color: var(--text-card-title1); 
                    font-size: 14px;
                    background-color: none;
                    opacity: 1;
                    overflow: hidden;
                }

                #lista_planetas {
                    color: var(--text-card-title1); 
                    font-size: 14px;
                    background-color: none;
                    /* background-color: #fdfdfe; */
                    opacity: 1;
                    overflow: hidden;
                }

            #resultado {
                width: 200px;
                padding-left: 20px;
                font-family: var(--font-card-descr);
                font-size: 14px;
                line-height: 15px;
                color: var(--text-card-descr1);
            }
            
            #lupa-img {
                padding-left: 20px;
            }

            @media (max-width:360px) {


                #lupa-list {
                    width: 20px;
                    height: 20px;
                }

                #lista_categorias {
                    font-size: 12px;
                }

                #lista_planetas {
                    font-size: 12px;
                }

                #resultado {
                    font-size: 10px;
                    line-height: 11x;
                }

                #lupa-img {
                    padding-left: 5px;
                }

            }


            #header-banner-div {
                width: 100%;
                height: 150px;
            }

        .return-showcase-redirect {
            position: relative;
        }

            .return-showcase-redirect p {
                position: absolute;
                visibility: hidden;
                top: 50%;
                left: 75%;
                transform: translate(-50%,-50%);
                /* text-shadow: 0 0 8px rgba(250, 248, 248, 0.8); */
                color: #fff;
                text-shadow: 3px 3px 8px rgb(0, 0, 0, 0.8);
                font-size: 14px;
                line-height: 16px;
                font-family: "Montserrat", sans-serif;
                font-weight: 600;
                text-align: center;
            }

            .return-showcase-redirect:hover {
                p {
                    visibility: visible;
                }
            }



#main-div {
    /* background-image: url("/static/btqst02_02shc_images/paisley_008.webp"); */
    /* background: var(--background8); */
    opacity: 1;
    min-height: 100vh;
}

/* NOTA : "bodyarea-div-sec1" y "bodyarea-div-sec2" no tienen propiedades CSS,
y se utilizan exclusivamente como divisiones de estructura. */

/* #bodyarea-div-sec2 {
    width:fit-content;
} */



#footer-div {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    /* padding: 10px 20px 10px 20px; */
    font-size: small;

    /* position: fixed;
    bottom: 0; */
    width: 100%;
    height: auto;
    /* line-height: 30px;
    background: var(--background7);
    opacity: 0.8;
    z-index: 2; */
}

    .creditos {
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        padding: 10px 20px 10px 20px;
        font-size: small;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: var(--background7);
        opacity: 0.8;
        z-index: 2;
    }


        #versioning,
        #spacer,
        #copy-rights {
            font-size: small;
            color: #243f73;
        }

    .escudo {
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-around;
        align-items: flex-start;
        padding: 10px 20px 30px 20px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: small;
        /* font-weight: bold; */
        /* color: #484848; */
        color: #7f7f7f;
        /* position: fixed; */
        /* bottom: 0; */
        width: 100%;
        min-height: 100px;
        /* line-height: 100px; */
        background: var(--background7);
        /* opacity: 1; */
        z-index: 2;
    }

        .tarjeta {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            /* gap: 20px; */
            width: 400px;
            height: auto;
            justify-content: space-around;
            align-items: start;
            align-items: baseline;
        }

            .tarjeta a {
                text-decoration: none; 
                color: #7f7f7f; 
                line-height: 20px;
            }

            .tarjeta a:hover {
                color: #f3a114;
            }

        .medios {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            width: 400px;
            height: auto;
            justify-content: center;
            align-items: center;
        }

            .medios-titulo {
                padding: 0px 0px 10px 0px;    
            }
            .medios-contenido {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 20px;
            }

        .rrss {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            width: 400px;
            height: auto;
            justify-content: center;
            align-items: center;
            /* z-index: 1; */
        }

            .rrss-titulo {
                padding: 0px 0px 10px 0px;   
            }
            .rrss-contenido {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 20px;
            }