@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');

@font-face { font-family: 'OnePiece'; src: url('../fonts/onepiece.ttf') format('truetype'); }
@font-face { font-family: 'Bang'; src: url('../fonts/bangbang.ttf') format('truetype');}
@font-face { font-family: 'Tusker'; src: url('../fonts/tusker.ttf') format('truetype');}

/*  1. REGRAS GERAIS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #f5f5f5;
}

/*  2. HEADER & MENU */
header {
    width: 100%;
    padding-top: 30px;
    text-align: center;
    position: absolute; 
    top: 0;
    z-index: 999;
}

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center; 
    align-items: center;     
    flex-wrap: nowrap; 
    gap: 100px;
}

.menu li {
    font-family: "Poppins", sans-serif; 
    display: inline; 
    margin: 0px;  
}

.menu li img {
    height: 30px;
    width: auto;
}

.menu li a {
    color: #f5f5f5;
    text-decoration: none;
    font-size: 1.4rem; 
    transition: color 0.2s; 
}

.menu li a:hover {
    color: #fc4c02;
}

/*  3. INTRO PADRÃO (Páginas internas) */
.page-intro {
    width: 100%; 
    min-height: 50vh; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    padding-top: 150px; 
    position: relative;
}

.deco-stars {
    display: flex;
    align-items: center;
    gap: 15px; 
    margin-bottom: -50px; 
    z-index: 4; 
}

.linha-laranja {
    width: 150px; 
    height: 2px; 
    background-color: #fc4c02; 
}

.estrelas {
    color: #f5f5f5; 
    font-size: 1.2rem;
    letter-spacing: 5px; 
}

.container-camadas {
    position: relative; 
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: 100%;
    height: 250px;
}

.texto-fundo {
    font-family: "OnePiece"; 
    text-align: center; 
    color: #f5f5f5; 
    font-size: 8rem; 
    position: absolute;
    z-index: 1; 
    font-weight: normal;
}

.simbolo-meio {
    position: absolute;
    z-index: 2;
    width: 190px; 
}

.texto-frente {
    font-family: "Bang"; 
    position: absolute;
    z-index: 3;
    color: #f5f5f5;
    font-size: 1.5rem; 
}

.subtitulo { 
    font-family: "Poppins", sans-serif; 
    font-weight: 700; 
    color: #f5f5f5;
    text-align: center; 
    font-size: 1.4rem; 
    letter-spacing: 10px; 
    margin-top: 6px; 
}

/*  4. FOOTER */
#rodape {
    width: 100%;
    display: flex;
    flex-direction: column;
}

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

.footer-superior {
    background-color: #0a0a0a; 
    background-image: url('../img/global/footer.png'); 
    background-size: cover;
    background-position: center;
    padding: 60px 0;
}

.footer-marca {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo-footer {
    height: 200px; 
    width: auto;
}

.footer-marca p {
    color: #f5f5f5;
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0;
}

.footer-menu ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.footer-menu a {
    color: #f5f5f5;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-menu a:hover {
    color: #fc4c02; 
}

.footer-inferior {
    background-color: #fc4c02; 
    padding: 20px 0;
}

.bottom-container {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #f5f5f5;
}

.footer-legal {
    display: flex;
    gap: 30px;
    align-items: center;
}

.footer-legal a {
    color: #f5f5f5;
    text-decoration: none;
}

.footer-legal a:hover {
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-social a {
    color: #f5f5f5; 
    font-size: 1.5rem; 
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-social a:hover {
    transform: scale(1.2); 
    color: #1c1c1c; 
}



/*  RESPONSIVIDADE GERAL */

/*  1. TABLETS NA VERTICAL  */  
@media (max-width: 900px) {
    /* HEADER E MENU */
    .menu { gap: 30px; }
    .menu li a { font-size: 1.1rem; }

    /* INTRODUÇÃO (PÁGINAS INTERNAS) */
    .page-intro .texto-fundo { font-size: clamp(4.5rem, 15vw, 6.5rem); } 
    .page-intro .simbolo-meio { width: clamp(120px, 15vw, 150px); }
    .page-intro .texto-frente { font-size: clamp(0.9rem, 2vw, 1.2rem); }
    .page-intro .subtitulo { font-size: clamp(0.7rem, 2vw, 0.9rem); letter-spacing: clamp(8px, 1.5vw, 12px);}
    .page-intro .container-camadas { height: clamp(120px, 15vw, 180px); }
    .page-intro .deco-stars { margin-bottom: -20px; gap: 10px; }
    .page-intro .linha-laranja { width: clamp(70px, 10vw, 120px); }
    .page-intro .estrelas { font-size: clamp(1rem, 2vw, 1.2rem); letter-spacing: 3px; }

    /* FOOTER */
    .footer-container {
        flex-direction: column;
        gap: 40px; 
        text-align: center; 
    }
    .footer-marca { flex-direction: column; gap: 20px; }
    .footer-menu ul { flex-wrap: wrap; justify-content: center; }
    .bottom-container { flex-direction: column; gap: 20px; }
    .footer-legal { flex-wrap: wrap; justify-content: center; }
}

/*  2. CELULARES */
@media (max-width: 600px) {
    /* HEADER E MENU */
    header { padding-top: 15px; }
    .menu { gap: 12px; flex-wrap: wrap; }
    .menu li a { font-size: 0.85rem; }
    .menu li img { height: 16px; }

    /* INTRODUÇÃO (PÁGINAS INTERNAS) */
    .page-intro { min-height: 40vh; padding-top: 120px; }
    .page-intro .texto-fundo { font-size: clamp(3.5rem, 12vw, 5rem); } 
    .page-intro .simbolo-meio { width: clamp(80px, 20vw, 110px); }
    .page-intro .texto-frente { font-size: clamp(0.6rem, 2vw, 0.9rem); }
    .page-intro .subtitulo {font-size: clamp(0.65rem, 2vw, 0.8rem); letter-spacing: clamp(4px, 1.5vw, 8px); margin-top: 0; margin-bottom: 0;}
    .page-intro .container-camadas { height: 100px; }
    .page-intro .deco-stars { margin-bottom: -25px; gap: 8px; }
    .page-intro .linha-laranja { width: clamp(40px, 10vw, 80px);} 
    .page-intro .estrelas { font-size: 0.8rem; letter-spacing: 2px; }

    /* FOOTER */
    .logo-footer { height: 140px; }
    .footer-marca p { font-size: 1rem; }
    .footer-menu ul { flex-direction: column; gap: 15px; }
    .footer-menu a { font-size: 1.2rem; }
    .footer-superior { padding: 40px 0; }
}