*{padding: 0;margin: 0;box-sizing: border-box;font-size: 0.85rem !important;}
html{overflow: auto;}
body {
    background: yellowgreen;
    color: #fff;
    font-family: 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    font-weight: 300;
}
header{padding: 5px;background: #0f0f10;display: flex;justify-content: space-between;align-items: center;}
.toplogo{letter-spacing: 5px;padding: 0 0 0 20px;}
.toplogo a{text-decoration: none;color: rgb(241, 236, 236);}
.suplogo{font-size: 0.5em;font-weight: lighter; color: rgb(241, 236, 236);}
nav{padding: 10px;width: 100%;text-align: end;}
nav a{text-decoration: none;color: black;font-weight: light;}
nav a:hover{text-decoration: underline;color: black;}
/* h1 */
h1{text-align: center;font-family: arial;text-transform: uppercase;font-weight: lighter;background-color: rgba(210, 246, 121, 0.933);}

/* banner  */
.logos,.books,.covers{background-color: rgba(255, 255, 255, 0.933);display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
.carousellogos,.carousellogos2,.carousellogos3,.carousellogos4,.carousellogos5,.carousellogos6,.carousellogos7{width: 100%;display: flex;align-items: center;justify-content: space-between;overflow: auto;scrollbar-width: none;}
.carousels img{width: 200px;height: 200px;position: relative;}
.carousellogos6 img{width: 200px;height: auto;}
.carousellogos7 img{width: 300px;height: auto;margin: 0 2px;}


.toggle{position: fixed;left: 0;right: 0;bottom: 0;top:0;margin: 0;margin: auto;width: 100%;height: 100%;z-index: 10000;}

/* indices  */
.indices{display: flex;align-items: center;justify-content: center;width: 100%;padding: 20px;}
.indice{width: 100px;border-radius: 50%;}

/* footer  */
.footer {background: #0f0f10;color: #f1f1f1;padding: 40px 0;border-top: 1px solid rgba(255, 255, 255, 0.05);font-family: 'Segoe UI', Arial, sans-serif;}

.footer-container {width: 90%;max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;}

.footer-left h2 {font-size: 1.6rem;color: #ffffff;margin-bottom: 8px;}

.footer-left p {color: #aaa;font-size: 0.95rem;line-height: 1.4;}

.footer-center a {display: inline-block;margin-right: 18px;color: #ddd;text-decoration: none;font-size: 0.95rem;transition: color 0.2s ease;}

.footer-center a:hover {color: #00bcd4;}

.footer-right p {color: #777;font-size: 0.85rem;margin: 0;text-align: right;}

@media (max-width: 768px) {.footer-container {flex-direction: column;align-items: center;text-align: center;}
.footer-center a {margin: 5px 10px;}
.footer-right p {text-align: center;}
}


/* logoscatalogue */
.catalogue{width: 30%;height: 30%;position: fixed;background-color: rgb(38, 37, 37);color: wheat;left: 0;top: 0;z-index: 100;}
.zoom{position:fixed !important;width:100% !important;height: 100% !important;left: 0 !important;top: 0 !important;z-index: 100 !important;}



.whatsapp{width: 100px;height: 100px;position: fixed;right:0;bottom: 0;cursor: pointer;z-index: 100;}
b{color: orangered;}
section{width: 100%;background-color: #0f0f10;text-align: justify;color: rgb(255, 255, 255);font-weight: lighter;padding: 50px 10px;}  
span{background-color: rgb(0, 0, 0);border-radius: 10px;margin: 10px;line-height: 20px;cursor: pointer;padding: 2px;}
span:hover{background-color: orangered;} 
li{list-style-type: none;width: 100%;}


.packs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: red;
    gap: 20px;
}

.packs div {
    background: #0F0F10;
    padding: 20px;
    width: 280px;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.packs div:hover {
    transform: translateY(-4px);
}

.packs b {
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: orangered;
    margin-bottom: 10px;
}

.packs li {
    list-style: none;
    margin: 6px 0;
    font-size: 14px;
    color: #ffffff;
    padding-left: 12px;
    position: relative;
}

.packs li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: orangered;
}

@media(max-width:800px) {
    .packs div {
        width: 90%
    }
}

.decor{perspective: 100px;width: 100%;margin: 100px 0;overflow: hidden;}
.decoration{transform-style: preserve-3d;transform: rotateX(20deg);height: 50vh;background-color:#0f0f10;display: flex;align-items: center;justify-content: center;}
.BlackBox{width: 200px;height: 200px;background-color: #2a2b2b;margin: 0 3px;}