* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', Arial, sans-serif;

}



/* BASE */

html, body {

    width: 100%;

    min-height: 100%;

}



body {

    background-color: #000;

    color: #fff;

}



/* ===============================

   MENU (FLUTUANTE SOBRE A HERO)

================================= */

.menu {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 20;



    background: rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(4px);

    padding: 18px 0;

}



.menu-left {

    list-style: none;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

}



.menu-left li {

    position: relative;

}



.menu-left a {

    text-decoration: none;

    color: #ffffff;

    font-weight: 300;

    font-size: 14px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: all 0.3s ease;

}



.menu-left a:hover {

    color: #ff8c2b;

    text-shadow: 0 0 6px #ff8c2b;

}



/* ===============================

   DROPDOWN

================================= */

.dropdown {

    position: relative;

}



.dropdown::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 20px;

}



.dropdown-menu {

    position: absolute;

    top: calc(100% + 10px);

    left: 50%;

    transform: translateX(-50%);



    background: rgba(10, 10, 10, 0.95);

    backdrop-filter: blur(6px);



    list-style: none;

    padding: 16px 0;

    min-width: 220px;



    border-radius: 10px;

    border: 1px solid rgba(255,255,255,0.15);

    box-shadow: 0 15px 40px rgba(0,0,0,0.7);



    opacity: 0;

    visibility: hidden;

    transition: opacity 0.25s ease, transform 0.25s ease;



    text-align: center;

    z-index: 9999;

}



.dropdown:hover .dropdown-menu,

.dropdown-menu:hover {

    opacity: 1;

    visibility: visible;

}



.dropdown-menu li a {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;



    padding: 14px 0;

    font-size: 15px;

    font-weight: 300;

    letter-spacing: 2px;

    color: #ffffff;

    text-decoration: none;

    transition: background 0.2s ease;

}



.dropdown-menu li a::before {

    content: "›";

    opacity: 0.6;

    transition: transform 0.25s ease, opacity 0.25s ease;

}



.dropdown-menu li a:hover::before {

    transform: translateX(6px);

    opacity: 1;

}



.dropdown-menu li a:hover {

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

}

.section-divider {

    width: 100%;

    height: 1px;

    background: linear-gradient(

        to right,

        transparent,

        rgba(201,154,85,0.6),

        transparent

    );

}



/* ===============================

   HERO (BACKGROUND A PARTIR DO TOPO)

================================= */

.hero {

    position: relative;

    min-height: 100vh;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    text-align: center;



    background:

        linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 0%,

    rgba(0, 0, 0, 0) 70%,

    rgba(0, 0, 0, 0) 100%

),

        url("../img/background.png") no-repeat top center;



    background-size: cover;

}

/* ===============================

   SESSÃO 2 – BACKGROUND LAVA

================================= */

.section-2 {

    position: relative;

    min-height: 100vh;

    padding: 120px 0;



    background:

        linear-gradient(

            to bottom,

            rgba(0, 0, 0, 0.219),

            rgb(0, 0, 0)

        ),

        url("../img/backgroundsessao2.png") no-repeat center center;



    background-size: cover;

    background-attachment: scroll;

}



/* overlay cinematográfico */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(

        ellipse at center,

        rgba(0,0,0,0.15) 0%,

        rgba(0,0,0,0.85) 75%

    );

    z-index: 1;

}



.hero > * {

    position: relative;

    z-index: 2;

}



/* LOGO */

.logo {

    max-width: 750px;

    margin-bottom: 55px;

    filter: drop-shadow(0 0 20px rgba(0,0,0,0.8));

}



/* SUBTÍTULO */

.hero-subtitle {

    margin-top: -100px;

    display: flex;

    justify-content: center;

}



.hero-subtitle span {

    padding: 10px 26px;

    font-family: 'Cinzel', serif;

    font-size: 13px;

    letter-spacing: 3px;

    text-transform: uppercase;



    color: #e6c77a;



    background: linear-gradient(

        180deg,

        rgba(30, 20, 10, 0.95),

        rgba(10, 6, 3, 0.95)

    );



    border-radius: 30px;

    border: 1px solid rgba(230, 199, 122, 0.45);



    box-shadow:

        inset 0 0 12px rgba(0,0,0,0.6),

        0 0 20px rgba(230, 199, 122, 0.15);

}



/* BOTÕES */

.buttons {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-top: 100px;

}



.rpg-btn {

    position: relative;

    padding: 14px 50px;

    min-width: 220px;



    background: linear-gradient(

        to bottom,

        rgba(30, 20, 10, 0.95),

        rgba(10, 5, 2, 0.95)

    );



    color: #f5f5f5;

    text-decoration: none;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 3px;

    text-transform: uppercase;



    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 6px;



    box-shadow:

        inset 0 0 10px rgba(255, 255, 255, 0.05),

        0 0 18px rgba(0, 0, 0, 0.8);



    transition: all 0.35s ease;

    overflow: hidden;

}



.rpg-btn::before {

    content: "";

    position: absolute;

    inset: 2px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 4px;

}



.rpg-btn:hover {

    transform: translateY(-6px) scale(1.05);

}



.rpg-btn::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

    background: linear-gradient(

        120deg,

        transparent,

        rgba(255, 255, 255, 0.15),

        transparent

    );

    transition: left 0.6s ease;

}



.rpg-btn:hover::after {

    left: 120%;

}



/* ===============================

   ANIMAÇÃO HERO

================================= */

.hero * {

    opacity: 0;

    transform: translateY(25px);

    animation: heroFade 1.2s ease forwards;

}



.hero .logo { animation-delay: 0.2s; }

.hero .hero-subtitle { animation-delay: 0.5s; }

.hero .buttons { animation-delay: 0.8s; }



@keyframes heroFade {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* FOOTER */

.site-footer {

  width: 100%;

  background: linear-gradient(

    to top,

    rgba(0,0,0,0.95),

    rgba(0,0,0,0.75)

  );

  padding: 30px 20px;

  text-align: center;

  border-top: 1px solid rgba(201,154,85,0.35);

}



.footer-content p {

  margin: 6px 0;

  font-size: 13px;

  color: #f8f7f4;

  line-height: 1.6;

}



.footer-dev {

  font-size: 13px;

}



.footer-dev a {

  color: #0aee7c;

  text-decoration: none;

  font-weight: 600;

  transition: all 0.3s ease;

}



.footer-dev a:hover {

  color: #eeede9;

  text-shadow: 0 0 10px rgba(247, 246, 245, 0.6);

}

/* BOTÃO VOLTAR AO TOPO */

#backToTop {

  position: fixed;

  bottom: 30px;

  right: 30px;



  width: 55px;

  height: 55px;



  display: flex;

  align-items: center;

  justify-content: center;



  border-radius: 50%;

  border: 2px solid #c99a55;



  background: linear-gradient(145deg, #3b2412, #1c0f07);

  color: #f5d28b;



  font-size: 20px;

  font-weight: bold;



  cursor: pointer;

  opacity: 0;

  pointer-events: none;



  box-shadow:

    0 0 10px rgba(201,154,85,0.4),

    inset 0 0 8px rgba(0,0,0,0.7);



  transition: all 0.35s ease;

  z-index: 9999;

}



#backToTop.show {

  opacity: 1;

  pointer-events: auto;

}



#backToTop:hover {

  transform: translateY(-6px);

  box-shadow:

    0 0 20px rgba(201,154,85,0.7),

    inset 0 0 12px rgba(0,0,0,0.85);

}

header {

  position: sticky;   /* deixa fixo ao rolar */

  top: 0;             /* cola no topo */

  z-index: 1000;      /* fica acima do conteúdo */

}



.menu {

  background: rgba(0, 0, 0, 0.85); /* fundo escuro */

  backdrop-filter: blur(6px);     /* efeito premium */

}

/* TRES BARRINHAS PARA COLOCAR PAGINAS DO FACEBOOK*/