/* Google Fonts Imports */
@import url('https://fonts.googleapis.com/css2?family=Balthazar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* CSS Variables for Typography */
:root {
    --font-title: 'Balthazar', serif;
    --font-subtitle: 'Poppins', sans-serif;
    --font-text: 'Poppins', sans-serif;
    
    /* Navbar Tokens */
    --navbar-height: 80px;
    --navbar-bg: #0b0e15;
    --navbar-glow: rgba(8, 190, 200, 0.1);
    --navbar-hover-glow: rgba(8, 190, 200, 0.2);
    --navbar-border: rgba(8, 190, 200, 0.3);
    --navbar-gradient: linear-gradient(90deg, rgba(8, 190, 200, 0.2) 0%, rgba(8, 190, 200, 0.2) 50%, rgba(8, 190, 200, 0.2) 100%);
    --navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --navbar-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Desktop Expansion Variables */
    --desktop-container-max-width: 100vw;
    --desktop-padding: 0;
    --desktop-margin: 0;
}

/* ===== DESKTOP EXPANSION CONFIGURATIONS ===== */
/* Configurações para expansão total no desktop (100% de largura) */
@media (min-width: 1280px) {
    /* Reset de larguras fixas para expansão total - EXCETO NAVBAR */
    .section-header,
    .wrapper,
    .footer-wrapper,
    .footer-bottom {
        max-width: var(--desktop-container-max-width);
        width: 100%;
        margin-left: var(--desktop-margin);
        margin-right: var(--desktop-margin);
        padding-left: var(--desktop-padding);
        padding-right: var(--desktop-padding);
    }
    
    /* Navbar mantém largura controlada para evitar overflow */
    
    /* Expansão específica para seções principais */
    #home,
    #personalization,
    #rules,
    #olympiad,
    #security,
    #content {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        left: 0;
        right: 0;
    }
    
    /* Ajuste para containers internos mantendo centralização */
    #home .section-header,
    #personalization .section-header,
    #rules .section-header,
    #olympiad .section-header,
    #security .section-header,
    #content .section-header {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }
    
    /* Expansão do slider de regras */
    #rules .slider {
        max-width: 100vw;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Expansão da seção olympiad */
    #olympiad .wrapper {
        max-width: 100vw;
        width: 100%;
        padding: 0;
    }
    
    #olympiad .wrapper .days {
        max-width: 100vw;
        width: 100%;
        padding: 0 40px;
    }
    
    /* Expansão da seção de segurança */
    #security .back,
    #security .char,
    #security .flames,
    #security .enemy {
        width: 100vw;
        max-width: 100vw;
    }
    
    /* Ajuste para pontos de segurança */
    #security .points,
    #security .backpoints {
        max-width: 100vw;
        width: 100%;
    }
    
    /* Expansão da seção home */
    #home .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
  
::-webkit-scrollbar-track {
    background: #161616;
    border-radius: 0px;
}
  
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #252525;
}

body {
    position: relative;
    height: 100vh;
    font-family: var(--font-text);
    background: #00040f;
    color: #ffffff;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: -10;
}

/* Expansão total do body no desktop */
@media (min-width: 1280px) {
    body {
        width: 100vw;
        max-width: 100vw;
    }
    
    html {
        width: 100vw;
        max-width: 100vw;
        scroll-behavior: smooth;
        scroll-padding-top: 80px; /* Compensa o header fixo de 80px */
    }
}

ul, ol, li, html, body {
    padding: 0;
    margin: 0;
}

/* Scroll suave e compensação do header para todos os dispositivos */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Compensa o header fixo de 80px */
}

ul, ol, li {
    display: block;
    list-style: none;
}

a {
    text-decoration: none;
    color: #ffffff;
}

mark {
    color: #08bec8;
    background-color: rgba(0, 0, 0, 0);
}

*:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.color-accent {
    color: #08bec8;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.show-smartphone {
    display: none;
}

.hidden {
    visibility: hidden;
}

.nodisplay {
    display: none;
}

.play {
    width: 220px;
    height: 58px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: url(../img/play.png) top no-repeat;
    cursor: pointer;
}


.play:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 58px;
    background: url(../img/play.png) bottom no-repeat;
    transition: all .2s linear;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.play:hover:after {
    opacity: 1;
    visibility: visible; 
}


#language {
    height: 95vh;
}

#language .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#language .wrapper ul li {
    display: inline-block;
}

#language .wrapper ul li a { 
    text-transform: uppercase;
    display: block;
    padding: 12px 15px;
    letter-spacing: 1px;
    transition: all .25s linear 0s;
}

.vote-wrapper {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1100;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    background: rgba(8, 190, 200, 0.2);
}

.vote-wrapper ul {
    max-width: 550px;
    padding: 12px 15px;
    background: rgba(8, 190, 200, 0.2);
}

.vote-wrapper ul li {
    padding: 12px 15px;
}

.vote-wrapper ul li .vote {
    width: 168px;
    height: 44px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: url(../img/play.png) top no-repeat;
}

.hide {
    visibility: hidden;
}

.vote-wrapper ul li .vote:after {
    content: "";
    position: absolute;
    width: 168px;
    height: 44px;
    background: url(../img/play.png) bottom no-repeat;
    transition: all .2s linear;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.vote-wrapper ul li .vote:hover:after {
    opacity: 1;
    visibility: visible; 
}

/* ===== NOVA NAVBAR ===== */
.navbar {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99999;
    height: var(--navbar-height);
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--navbar-border);
    box-shadow: var(--navbar-shadow);
    overflow: visible;
    opacity: 0;
    transform: translateY(-20px);
    animation: navbarFadeInDown 0.6s ease-in-out forwards;
}

@keyframes navbarFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    gap: 15px;
    box-sizing: border-box;
}

/* Garantir que os elementos se distribuam corretamente */
.navbar-container > * {
    flex-shrink: 0;
}

/* Garantir alinhamento vertical perfeito */
.navbar-logo,
.navbar-menu,
.navbar-actions {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Logo à esquerda */
.navbar-logo {
    flex-shrink: 0;
    z-index: 10;
}

.navbar-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--navbar-transition);
}

.navbar-logo img {
    height: 50px;
    width: auto;
    transition: var(--navbar-transition);
}

.navbar-logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px var(--navbar-glow));
}

/* Menu central */
.navbar-menu {
    flex: 1;
    display: flex;
    justify-content: center;
    z-index: 10;
    max-width: 500px;
    margin: 0 auto;
    min-width: 0; /* Permite que o flex item encolha */
}

.navbar-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.navbar-link {
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #c0c0c0;
    text-decoration: none;
    padding: 15px 0.7em;
    position: relative;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    flex: 0 1 auto;
    min-width: fit-content;
    white-space: nowrap;
    max-width: 115px;
}

.navbar-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--navbar-border);
    transition: var(--navbar-transition);
    transform: translateX(-50%);
}

/* Triângulos removidos dos links para layout mais limpo */

/* Estados hover e active unificados */
.navbar-link:hover,
.navbar-link.is-active {
    color: #fff;
    text-shadow: 0 0 8px var(--navbar-glow);
    background: linear-gradient(0deg, rgba(8, 190, 200, 0.2) 0%, rgba(8, 190, 200, 0.1) 50%, rgba(8, 190, 200, 0.0) 100%);
    padding: 35px 0.9em;
    transform: translateY(-1px);
}

.navbar-link:hover::before,
.navbar-link.is-active::before {
    width: 100%;
    background: #08bec8;
}

/* ===== POSICIONAMENTO DO TÍTULO INFORMAÇÕES ===== */
#news .section-header h1.animated {
    /* Posicionamento personalizado */
    margin-top: 120px;       /* Espaço superior para compensar navbar fixo */
    margin-bottom: -30px;     /* Espaço inferior */
    text-align: center;      /* Centralizado */
    position: relative;      /* Para controle de posição */
}

/* ===== DROPDOWN MENU STYLES ===== */
.navbar-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle::after {
    content: '▼';
    font-size: 10px;
    margin-left: 5px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.7;
}

.navbar-dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown-menu {
    position: fixed;
    background: rgba(11, 14, 21, 0.98);
    backdrop-filter: blur(15px);
    border: 1px solid var(--navbar-border);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(8, 190, 200, 0.15);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 999999;
    pointer-events: none;
}

.navbar-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.dropdown-menu li {
    margin: 0;
    padding: 0;
}

.dropdown-link {
    display: block;
    padding: 12px 20px;
    color: #c0c0c0;
    text-decoration: none;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    border-radius: 6px;
    margin: 2px 8px;
    white-space: nowrap;
}

.dropdown-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(8, 190, 200, 0.2) 0%, rgba(8, 190, 200, 0.1) 100%);
    border-radius: 6px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-link:hover,
.dropdown-link.is-active {
    color: #fff;
    background: rgba(8, 190, 200, 0.08);
    text-shadow: 0 0 10px var(--navbar-glow);
    transform: translateX(3px);
}

.dropdown-link:hover::before,
.dropdown-link.is-active::before {
    width: 100%;
}

/* Animação de entrada dos itens do dropdown */
.dropdown-menu li {
    opacity: 0;
    transform: translateY(-8px);
    animation: dropdownItemFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.dropdown-menu li:nth-child(1) {
    animation-delay: 0.08s;
}

.dropdown-menu li:nth-child(2) {
    animation-delay: 0.16s;
}

@keyframes dropdownItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile dropdown styles */
@media (max-width: 768px) {
    .navbar-dropdown.mobile-active .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        position: static;
        background: rgba(11, 14, 21, 0.98);
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 6px 0;
        min-width: auto;
        width: 100%;
        pointer-events: all;
        max-height: none;
        overflow: visible;
    }
    
    .navbar-dropdown.mobile-active .dropdown-link {
        padding: 10px 24px;
        margin: 0;
        border-radius: 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block;
        width: 100%;
    }
    
    .navbar-dropdown.mobile-active .dropdown-link:hover {
        transform: none;
        background: rgba(8, 190, 200, 0.1);
        color: #08bec8;
    }
    
    .navbar-dropdown.mobile-active .dropdown-link:last-child {
        border-bottom: none;
    }
}

/* Social + CTA à direita */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    z-index: 10;
    min-width: fit-content;
}

/* Ocultar botão Painel mobile no desktop */
@media (min-width: 769px) {
    .mobile-panel-item {
        display: none;
    }
}

.navbar-social {
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 9999;
}

.navbar-social .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #c0c0c0;
    text-decoration: none;
    border-radius: 4px;
    transition: var(--navbar-transition);
    position: relative;
}

.navbar-social .social-icon svg {
    width: 16px;
    height: 16px;
}

.navbar-social .social-icon:hover {
    color: #08bec8;
    transform: translateY(-2px);
    background: var(--navbar-glow);
    box-shadow: 0 4px 12px var(--navbar-hover-glow);
}

/* Divisórias removidas para layout mais limpo */

/* CTA Oval */
.navbar-cta {
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 13px 26px;
    background: rgba(8, 190, 200, 0.1);
    border: 2px solid #08bec8;
    border-radius: 22px;
    position: relative;
    transition: var(--navbar-transition);
}

/* Losangos removidos para layout mais limpo */

.navbar-cta:hover {
    text-shadow: #ffffff 0px 0px 5px;
    padding: 13px 30px;
    letter-spacing: 1.2px;
    box-shadow: 0 6px 20px rgba(8, 190, 200, 0.4);
    background: rgba(8, 190, 200, 0.2);
}

/* Mobile Burger */
.navbar-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 20;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /* Melhor área de toque */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.navbar-burger span {
    width: 24px;
    height: 2px;
    background: #c0c0c0;
    margin: 3px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
    transform-origin: center;
}

.navbar-burger:hover span {
    background: #08bec8;
}

.navbar-burger:active {
    transform: scale(0.95);
}

.navbar-burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.navbar-burger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.navbar-burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Pulse animation para notificações */
.navbar-burger.has-notifications::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    animation: pulse-notification 2s infinite;
}

@keyframes pulse-notification {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Ripple effect */
.navbar-burger::after {
    content: '';
    position: absolute;
    top: 58%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(8, 190, 200, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.navbar-burger:active::after {
    width: 60px;
    height: 60px;
}

/* ===== RESPONSIVIDADE DESKTOP ===== */
@media (min-width: 1400px) {
    .navbar-container {
        max-width: 100%;
        padding: 0 40px;
    }
    
    .navbar-menu {
        max-width: 600px;
    }
    
    .navbar-list {
        gap: 6px;
    }
    
    .navbar-link {
        font-size: 16px;
        padding: 12px 0.7em;
    }
    
    .navbar-cta {
        font-size: 15px;
        padding: 14px 28px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .navbar-container {
        padding: 0 30px;
        gap: 12px;
    }
    
    .navbar-menu {
        max-width: 550px;
        flex: 1;
    }
    
    .navbar-list {
        gap: 3px;
        justify-content: center;
    }
    
    .navbar-link {
        font-size: 15px;
        padding: 12px 0.6em;
        max-width: 100px;
    }
    
    .navbar-cta {
        font-size: 14px;
        padding: 12px 24px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .navbar-container {
        padding: 0 30px;
        gap: 10px;
    }
    
    .navbar-menu {
        max-width: 550px;
        flex: 1;
    }
    
    .navbar-list {
        gap: 2px;
        justify-content: center;
    }
    
    .navbar-link {
        font-size: 15px;
        padding: 10px 0.6em;
        max-width: 100px;
    }
    
    .navbar-actions {
        gap: 15px;
    }
    
    .navbar-social {
        gap: 6px;
    }
    
    .navbar-cta {
        font-size: 13px;
        padding: 10px 20px;
    }
}


/* ===== RESPONSIVIDADE MOBILE ===== */
@media (max-width: 1023px) {
    .navbar-container {
        padding: 0 20px;
        gap: 15px;
    }
    
    .navbar-menu {
        max-width: 500px;
    }
    
    .navbar-list {
        gap: 2px;
    }
    
    .navbar-link {
        font-size: 15px;
        padding: 10px 0.75em;
    }
    
    .navbar-actions {
        gap: 16px;
    }
    
    .navbar-social {
        gap: 14px;
    }
    
    .navbar-social .social-icon {
        width: 22px;
        height: 22px;
    }
    
    .navbar-social .social-icon svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 768px) {
    .navbar-burger {
        display: flex;
    }
    
    /* Ocultar botão Painel original no mobile */
    .navbar-cta {
        display: none;
    }
    
    /* Ocultar seção personalization no mobile */
    #personalization {
        display: none !important;
    }
    
    /* Ocultar ícone CLASSES no mobile, mantendo apenas SISTEMAS, EVENTOS e EQUIPE */
    .featureline .featureicon:first-child {
        display: none !important;
    }
    
    /* Ajustar espaçamento entre seções no mobile */
    #home + #rules {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ajustar slider da seção rules para mobile */
    #rules .slider {
        height: 180px;
        max-width: calc(100% - 10px);
        margin: 5px auto;
        width: calc(100% - 10px);
    }
    
    #rules .slider .slider-wrapper {
        height: 180px;
    }
    
    /* Transição suave para mobile */
    #rules .slider .slider-wrapper>div {
        transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    }
    
    #rules .slider:before,
    #rules .slider:after {
        height: 202px;
    }
    
    /* Ocultar div.anchor da seção rules no mobile */
    #rules > div.anchor {
        display: none !important;
    }
    
    /* Ajustar header da seção rules para mobile */
    #rules .section-header {
        min-height: auto;
        padding: 70px 10px 5px 10px;
        margin: 0;
    }
    
    /* Ajustar background da seção rules para mobile */
    #rules {
        width: 150vw;
        max-width: 150vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 0; 
        margin-top: 0px; /*aqui*/
        margin-bottom: 0px;
        min-height: fit-content;
        height: auto;
    }
    
    /* Ocultar elementos de nuvens no mobile */
    
    .navbar-menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--navbar-height));
        background: var(--navbar-bg);
        backdrop-filter: blur(10px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 9999;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        visibility: hidden;
        opacity: 0;
    }
    
    .navbar-menu.mobile-open {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
    
    /* Bloquear scroll do body quando menu estiver aberto */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    /* ===== MELHORIAS MOBILE ESPECÍFICAS ===== */
    
    /* Seção de Acesso Rápido */
    .mobile-quick-access {
        padding: 20px;
        background: rgba(8, 190, 200, 0.1);
        border-bottom: 1px solid rgba(8, 190, 200, 0.2);
        margin-bottom: 20px;
    }
    
    .mobile-quick-access h3 {
        color: #08bec8;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 15px 0;
        text-align: center;
    }
    
    .mobile-quick-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .mobile-quick-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: rgba(8, 190, 200, 0.1);
        border: 1px solid rgba(8, 190, 200, 0.3);
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        min-height: 44px; /* Área de toque adequada */
        flex: 1;
        justify-content: center;
    }
    
    .mobile-quick-btn:hover {
        background: rgba(8, 190, 200, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(8, 190, 200, 0.3);
    }
    
    .mobile-quick-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Indicador de seção atual */
    .mobile-current-section {
        padding: 15px 20px;
        background: rgba(8, 190, 200, 0.05);
        border-left: 3px solid #08bec8;
        margin-bottom: 20px;
    }
    
    .mobile-current-section .current-label {
        font-size: 12px;
        color: #08bec8;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0;
    }
    
    .mobile-current-section .current-title {
        font-size: 16px;
        color: #fff;
        font-weight: 600;
        margin: 5px 0 0 0;
    }
    
    /* Melhorias nos links do menu */
    .navbar-menu .navbar-list {
        padding: 0;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    
    .navbar-menu .navbar-link {
        padding: 12px 30px;
        font-size: 16px;
        font-weight: 500;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        transition: all 0.3s ease;
        /* Remover efeitos desktop */
        background: none !important;
        transform: none !important;
        text-shadow: none !important;
        color: #ffffff;
        text-decoration: none;
    }
    
    /* Estados mobile unificados */
    .navbar-menu .navbar-link:hover {
        background: rgba(8, 190, 200, 0.1) !important;
        color: #08bec8 !important;
        transform: none !important;
        padding-left: 32px;
    }
    
    .navbar-menu .navbar-link.is-active {
        background: rgba(8, 190, 200, 0.15) !important;
        color: #08bec8 !important;
        border-left: 4px solid #08bec8;
        padding-left: 20px;
        font-weight: 600;
    }
    
    .navbar-menu .navbar-link::before {
        display: none; /* Remover underline desktop */
    }
    
    .navbar-menu .navbar-link::after {
        content: '→';
        position: absolute;
        right: 24px;
        opacity: 0;
        transition: all 0.3s ease;
        font-size: 18px;
        color: #08bec8;
        font-weight: bold;
    }
    
    .navbar-menu .navbar-link:hover::after {
        opacity: 1;
        transform: translateX(5px);
    }
    
    .navbar-menu .navbar-link.is-active::after {
        content: '●';
        opacity: 1;
        transform: none;
        font-size: 16px;
    }
    
    /* Estilo especial para dropdown toggle no mobile */
    .navbar-menu .navbar-dropdown .dropdown-toggle {
        cursor: pointer;
    }
    
    .navbar-menu .navbar-dropdown .dropdown-toggle::after {
        content: '+';
        font-size: 20px;
        font-weight: bold;
        transition: transform 0.3s ease;
    }
    
    .navbar-menu .navbar-dropdown.mobile-active .dropdown-toggle::after {
        content: '-';
        transform: rotate(180deg);
    }
    
    /* Item do botão Painel no mobile */
    .mobile-panel-item {
        margin-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 8px;
        margin-top: 4px;
    }
    
    /* Container do botão Painel no mobile */
    .mobile-panel-container {
        padding: 0 24px;
    }
    
    /* Botão Painel para mobile */
    .mobile-panel-btn {
        display: block;
        width: 88%;
        padding: 16px 24px;
        background: linear-gradient(135deg, #08bec8, #0a9ba3);
        color: #ffffff;
        text-decoration: none;
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        border-radius: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(8, 190, 200, 0.3);
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }
    
    .mobile-panel-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .mobile-panel-btn:hover::before {
        left: 100%;
    }
    
    .mobile-panel-btn:hover {
        background: linear-gradient(135deg, #0a9ba3, #08bec8);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(8, 190, 200, 0.4);
        color: #ffffff;
        text-decoration: none;
    }
    
    .mobile-panel-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(8, 190, 200, 0.3);
    }
    
    /* Separador visual */
    .mobile-menu-separator {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(8, 190, 200, 0.3), transparent);
        margin: 20px 0;
    }
    
    /* Botão voltar ao topo */
    .mobile-back-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: rgba(8, 190, 200, 0.9);
        border: none;
        border-radius: 50%;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(8, 190, 200, 0.4);
        transition: all 0.3s ease;
        z-index: 1000;
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
    }
    
    .mobile-back-to-top.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }
    
    .mobile-back-to-top:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(8, 190, 200, 0.6);
    }
    
    /* Loading state para links externos */
    .navbar-link.loading {
        position: relative;
        color: #08bec8 !important;
    }
    
    .navbar-link.loading::after {
        content: '';
        position: absolute;
        right: 20px;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(8, 190, 200, 0.3);
        border-top: 2px solid #08bec8;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Melhorias nos ícones sociais mobile */
    .navbar-actions {
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: auto;
    }
    
    .navbar-social {
        justify-content: center;
        gap: 8px;
    }
    
    .navbar-social .social-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .navbar-social .social-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(8, 190, 200, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease;
    }
    
    .navbar-social .social-icon:active::before {
        width: 100%;
        height: 100%;
    }
    
    .navbar-social .social-icon svg {
        width: 20px;
        height: 20px;
        transition: all 0.3s ease;
    }
    
    .navbar-social .social-icon:hover {
        background: rgba(8, 190, 200, 0.2);
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 6px 16px rgba(8, 190, 200, 0.4);
    }
    
    .navbar-social .social-icon:hover svg {
        transform: scale(1.2);
    }
    
    /* Bounce animation para ícones sociais */
    .navbar-social .social-icon.bounce {
        animation: bounce-social 0.6s ease;
    }
    
    @keyframes bounce-social {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0) scale(1);
        }
        40% {
            transform: translateY(-8px) scale(1.1);
        }
        60% {
            transform: translateY(-4px) scale(1.05);
        }
    }
    
    /* Modo offline indicator */
    .mobile-offline-indicator {
        position: fixed;
        top: 70px;
        left: 20px;
        right: 20px;
        background: #ff4757;
        color: #fff;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
        text-align: center;
        z-index: 1001;
        transform: translateY(-100px);
        transition: transform 0.3s ease;
    }
    
    .mobile-offline-indicator.visible {
        transform: translateY(0);
    }
    
    /* Pull to refresh indicator */
    .mobile-pull-refresh {
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translateX(-50%) translateY(-50px);
        background: rgba(8, 190, 200, 0.9);
        color: #fff;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 12px;
        z-index: 1001;
        transition: all 0.3s ease;
        opacity: 0;
    }
    
    .mobile-pull-refresh.visible {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    
    .mobile-pull-refresh::before {
        content: '↓';
        margin-right: 8px;
        animation: pull-arrow 1s ease-in-out infinite;
    }
    
    @keyframes pull-arrow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
    }
    
    .navbar-list {
        flex-direction: column;
        gap: 2px;
        align-items: center;
        justify-content: flex-start;
        padding-top: 60px;
    }
    
    .navbar-link {
        font-size: 18px;
        padding: 14px 1em;
        text-align: center;
        width: auto;
        max-width: 200px;
    }
    
    .navbar-actions {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: column;
        gap: 20px;
        z-index: 15;
    }
    
    .navbar-social {
        gap: 20px;
    }
    
    .navbar-social .social-icon {
        width: 28px;
        height: 28px;
    }
    
    .navbar-social .social-icon svg {
        width: 16px;
        height: 16px;
    }
    
    /* Regra removida - elementos não existem mais */
    
    .navbar-cta {
        font-size: 16px;
        padding: 14px 28px;
    }
    
    .navbar-logo img {
        height: 40px;
    }
    
    /* Dropdown mobile consolidado */
    .navbar-dropdown {
        position: static;
    }
    
    .dropdown-toggle::after {
        display: none;
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 10px 0 0 20px;
        min-width: auto;
    }
    
    .dropdown-link {
        font-size: 16px;
        padding: 12px 0;
        color: #a0a0a0;
    }
    
    .dropdown-link:hover {
        color: #08bec8;
        background: transparent;
        text-shadow: 0 0 8px var(--navbar-glow);
    }
    
    .dropdown-link::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .navbar-container {
        padding: 0 15px;
    }
    
    .navbar-list {
        gap: 2px;
        padding-top: 20px;
    }
    
    .navbar-link {
        font-size: 16px;
        padding: 12px 0.75em;
    }
    
    .navbar-actions {
        bottom: 30px;
        gap: 12px;
    }
    
    .navbar-social {
        gap: 18px;
    }
    
    .navbar-social .social-icon {
        width: 24px;
        height: 24px;
    }
    
    .navbar-social .social-icon svg {
        width: 14px;
        height: 14px;
    }
    
    .navbar-cta {
        font-size: 14px;
        padding: 12px 24px;
    }
}

/* ===== FALLBACK PARA ESTRUTURA ANTIGA ===== */
header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    background: rgba(8, 190, 200, 0.2);
    animation-delay: 3s;
    animation-name: fadeInDown;
}

header:after {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    top: 60px;
    z-index: -1;
    background: url(../img/header_shadow.png) repeat-x;
}

header .wrapper {
    width: 100%;
    max-width: 960px;
    margin: auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Header Navigation - REMOVIDA (navbar antiga) */

/* Header Center */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Header Social */
.header-social {
    width: 400px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-right: -22px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #c0c0c0;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
}

.social-icon:hover {
    color: #08bec8;
    transform: translateY(-2px);
    background: rgba(8, 190, 200, 0.2);
}

/* Losangos entre as redes sociais - REMOVIDOS para layout mais limpo */

/* Botões hambúrguer para mobile */
.mobile-nav-toggle,
.mobile-social-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.mobile-nav-toggle span,
.mobile-social-toggle span {
    width: 100%;
    height: 3px;
    background: #08bec8;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-nav-toggle.active span:nth-child(1),
.mobile-social-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-nav-toggle.active span:nth-child(2),
.mobile-social-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active span:nth-child(3),
.mobile-social-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Estilos para mobile */
@media (max-width: 768px) {
    .mobile-nav-toggle,
    .mobile-social-toggle {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .mobile-nav-toggle {
        left: 20px;
    }
    
    .mobile-social-toggle {
        right: 20px;
    }
    
    .header-social {
        gap: 40px;
    }
    
    .social-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .social-icon svg {
        width: 30px;
        height: 30px;
    }
    
}

/* Discord Modal Styles */
.discord-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.discord-modal-content {
    background: #36393f;
    margin: 10% auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: discordModalSlideIn 0.3s ease-out;
}

@keyframes discordModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.discord-modal-body {
    padding: 32px 24px;
    text-align: center;
    position: relative;
}

.discord-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #b9bbbe;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.discord-close:hover {
    background: #40444b;
    color: #ffffff;
}

.discord-logo {
    margin-bottom: 24px;
}

.discord-modal-body h2 {
    color: #ffffff;
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.discord-modal-body p {
    color: #b9bbbe;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 32px 0;
    font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.discord-button {
    background: #5865f2;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
}

.discord-button:hover {
    background: #4752c4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.discord-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(88, 101, 242, 0.3);
}

#home {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
}

#home .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    z-index: 2;
    transition: all .3s ease 0s;
}

#home .wrapper .text {
    max-width: 550px;
    text-shadow: 0px 0px 10px rgba(0,0,0);
}

#home .wrapper .text .separator {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -180px;
    animation-name: fadeInUp;
}

#home .wrapper .text .subtitle {
    font-family: var(--font-subtitle);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    position: relative;
    top: -160px; /* Ajuste este valor para mover para cima/baixo */
    margin: 0; /* Remove margin para não afetar outros elementos */
    letter-spacing: 10px;
    text-transform: uppercase;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.384);
    animation-delay: 0.5s;
    animation-name: fadeInUp;
}

#home .wrapper .text h1 {
    font-family: var(--font-title);
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 1.8px;
    margin-top: 25px;
    margin-bottom: 0px;
    animation-delay: 0.3s;
    animation-name: fadeInUp;
}

#home .wrapper .text p {
    line-height: 1.5em;
    letter-spacing: .8px;
    padding-bottom: 25px;
    color: #fff;
    animation-delay: 0.5s;
    animation-name: fadeInUp;
}

#home .wrapper .text .logo {
    position: relative;
    top: -100px;
    animation-delay: 0.7s;
    animation-name: fadeInUp;
    z-index: -0;
    width: 200px;        /* Largura da logo */
    height: auto;        /* Altura automática para manter proporção */
    max-width: 100%;     /* Responsivo */
    margin: 0 auto;      /* Centraliza horizontalmente */
    display: block;      /* Necessário para margin auto funcionar */
    transform: scale(3.0) !important; /* Aumenta a escala em 50% (1.5 = 150%) */
    transform-origin: center; /* Mantém o centro como ponto de escala */
}

#home .wrapper .play {
    position: relative;
    top: 30px;
    animation-delay: 2.8s;
    animation-name: fadeInUp;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#home .wrapper .play.animated {
    animation: fadeInUp 1s ease-out 2.8s both, bounce 2s ease-in-out infinite 3.8s;
}

#home .wrapper .play:hover {
    animation-play-state: paused;
}


#home .wrapper .featureline {
    display: flex;
    width: 750px;
    justify-content: space-between;
    margin: 0 auto;
    position: absolute;
    bottom: 110px;
}

#home .wrapper .featureline .featureicon {
    position: relative;
    width: 72px;
    height: 72px;
    text-align: center;
    z-index: 4;
    animation-name: fadeInUp;
    transition: all .8s cubic-bezier(0.4, 0, 0.2, 1);
}

.featureicon:before, .featureicon:after {
    content: "";
    height: 7px;
    position: absolute;
    top: 28px;
    animation-duration: .75s;
    animation-fill-mode: both;
    animation-name: fadeIn35;
    transform-origin: center;
}

.featureicon:hover:before,
.featureicon:hover:after {
    transform: scale(1);
}

.featureicon:first-child:before {
    left: -124px;
    width: 114px;
    background-size: 114px;
    background: url(../img/feature_divider_first.png) bottom no-repeat;
    animation-delay: 2.1s; 
}

.featureicon:nth-child(2):before {
    left: -90px;
    width: 80px;
    background-size: 80px;
    background: url(../img/feature_divider.png) bottom no-repeat;
    animation-delay: 2.2s; 
}

.featureicon:nth-child(3):before {
    left: -90px;
    width: 80px;
    background-size: 80px;
    background: url(../img/feature_divider.png) bottom no-repeat;
    animation-delay: 2.3s; 
}

.featureicon:nth-child(4):before {
    left: -90px;
    width: 80px;
    background-size: 80px;
    background: url(../img/feature_divider.png) bottom no-repeat;
    animation-delay: 2.4s; 
}

.featureicon:nth-child(5):before {
    left: -90px;
    width: 80px;
    background-size: 80px;
    background: url(../img/feature_divider.png) bottom no-repeat;
    animation-delay: 2.5s; 
}

.featureicon:nth-child(5):after {
    right: -124px;
    width: 114px;
    background-size: 114px;
    background: url(../img/feature_divider_first.png) bottom no-repeat;
    transform: rotate(.5turn);
    animation-delay: 2.6s; 
}

#home .wrapper .featureline .featureicon .featurelink {
    transition: all .8s cubic-bezier(0.4, 0, 0.2, 1);
}

#home .wrapper .featureline .featureicon .featurelink svg {
    position: absolute;
    top: -5px;
    left: 0;
    opacity: .35;
    fill: #fff;
    transition: all .25s linear 0s;
}

#home .wrapper .featureline .featureicon .featurelink:hover svg {
    fill: #ffffff;
    opacity: 1;
    transition: all .25s linear 0s;
}

#home .wrapper .featureline .featureicon:hover .featurelink {
    transform: scale(1.2) !important;
    transition: all .8s cubic-bezier(0.4, 0, 0.2, 1);
}

#home .wrapper .featureline .featuredesc {
    width: 140px;
    letter-spacing: 1px;
    text-align: center;
    margin-left: -34px;
    color: #fff;
}

#home:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/clouds_bottom_down.png) bottom no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

#personalization:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/clouds_bottom_up5.png) top no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

#personalization:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/clouds_bottom_down5.png) bottom no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

#rules:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/clouds_bottom_down3.png) bottom no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}
#olympiad:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/clouds_bottom_up3.png) top no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}
#olympiad:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/clouds_bottom_down4.png) bottom no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.3s ease;
}
#rules:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/clouds_bottom_up.png) top no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}
#security:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/clouds_bottom_up5.png) top no-repeat;
    background-size: cover;
    width: 100%;
    height: clamp(150px, 20vw, 500px);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

#home .video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0b0e15;
    z-index: 1;
    animation-name: fadeIn;
}

#home .video video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    opacity: .9;
    z-index: 0;
}

#home .video .pattern {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../img/lines.png) repeat 50% 0;
    opacity: .3;
    z-index: 1;
}

#features {
    display: flex;
    margin: 0 auto;
    max-width: 1000px;
}

#features .sidebar {
    position: fixed;
    background-color: #1b1b1b;
    max-width: 180px;
    width: 100%;
    height: 100%;
    padding: 80px 20px 20px 20px;
}

#features .sidebar ul {
    list-style-type: none;
}

#features .sidebar .menu ul {
    padding: 7px 0px 7px 17px;
}

#features .sidebar .menu li {
    padding: 10px 0px 0px 0px;
}

#features .sidebar .menu .caret {
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

#features .sidebar .menu a {
    transition: all .25s linear 0s;
}

#features .sidebar .menu a.active {
    color: #08bec8;
}

#features .sidebar .menu .nested a.subtopic {
    font-size: 13px;
}

#features .sidebar .menu .caret svg {
    fill: #ffffff;
    cursor: pointer;
    transform: rotate(180deg);
    transition: all .25s linear 0s;
}

#features .sidebar .menu .caret svg:hover {
    fill: #08bec8;
}

#features .sidebar .menu .caret-down svg {
    transform: rotate(0deg);
}

#features .sidebar .menu .nested {
    display: none;
}

#features .sidebar .menu ul.active {
    display: block;
}

#features .sidebar .parts {
    position: fixed;
    bottom: 0px;
    font-size: 13px;
    background: rgba(8, 190, 200, 0.2);
    width: 180px;
    margin: 0px -20px 0px -20px;
    padding: 0px 20px 0px 20px;
}

#features .sidebar .parts ul {
    padding: 7px 0px 7px 20px;
}

#features .sidebar .parts li {
    padding: 5px 0px 5px 0px;
}

#features .sidebar .parts a {
    color: #B5B5B5;
    transition: all .25s linear 0s;
}

#features .sidebar .parts ul li a:before { 
    content: "";
    position: absolute;
    left: 18px;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    background-size: 100%;
    transform: scale(0.5) rotate(45deg);
    opacity: 1;
    transition: all .2s linear 0s;
}

#features .sidebar .parts ul li a.active:before {
    content: "";
    position: absolute;
    left: 18px;
    width: 12px;
    height: 12px;
    border: 2px solid #08bec8;
    background: #08bec8;
    background-size: 100%;
    transform: scale(0.5) rotate(45deg);
    opacity: 1;
    transition: all .2s linear 0s;
}

#features .wrapper {
    min-width: 750px;
    width: 100%;
    padding: 80px 15px 20px 235px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: .7px;
}

#features .wrapper .topic:before, #features .wrapper .subtopic:before { 
    display: block; 
    content: " "; 
    margin-top: -70px; 
    height: 70px; 
    visibility: hidden; 
    pointer-events: none;
}

#features .wrapper h1 {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 36px;
    line-height: 44px;
    margin-top: 20px;
    margin-bottom: 0px;
}

#features .wrapper h2 {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 21px;
    line-height: 44px;
    margin-top: 10px;
    margin-bottom: 7px;
}

#features .wrapper table {
    min-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#features .wrapper td, #features .wrapper th {
    padding: 10px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #323232;
    min-width: 150px;
}

#features .wrapper .bigtable td, #features .wrapper .bigtable th {
    min-width: 10px;
}

#features .wrapper .picturetable td, #features .wrapper .picturetable th {
    padding: 10px 5px 10px 5px;
}

#features .wrapper .bigtable .itemname {
    white-space: nowrap;
}

#features .wrapper .bigtable .itemdesc {
    font-size: 11px;
}

/*.anchor {
    visibility: hidden;
    min-height: 40px;
}*/ 

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
    top: 30px;
}

.section-header h1 {
    font-family: var(--font-title);
    letter-spacing: .5px;
    font-size: 36px;
    margin: 35px 0 25px;
    color: #08bec8;
    text-transform: uppercase;
    animation-delay: 0s;
    animation-name: fadeInUp;
}

.section-header p {
    text-align: center;
    max-width: 700px;
    font-size: 13px;
    letter-spacing: .7px;
    line-height: 1.5em;
    margin: 0px;
    animation-delay: 0.2s;
    animation-name: fadeInUp;
}

/* ========================================
   SEÇÃO PRINCIPAL DE PERSONALIZAÇÃO
   ======================================== */
/* Container principal da seção de personalização de personagens */
#personalization {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0px;
    width: 100%;
    min-height: calc(max(950px, 100%));
    background-image: url(../img/teste/bg2.png);
    background-size: flex;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========================================
   RESPONSIVIDADE - DESKTOP
   ======================================== */
/* Expansão total da seção personalização no desktop */
@media (min-width: 1280px) {
    #personalization {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        background-size: cover;
        background-position: center;
    }
    
    /* Ajuste das classes para layout expansivo - diminuindo espaçamento */
    #personalization .char {
        /* Reduzir altura para melhor distribuição */
        height: 600px;
        min-height: 600px;
    }
    
    /* Apenas expansão da seção - sem alterar estrutura das classes */
}


/* ========================================
   ELEMENTOS BÁSICOS DOS PERSONAGENS
   ======================================== */
/* Container base para cada personagem/classe */
#personalization .char {
    position: absolute;
    top: 234px;
    height: 714px;
    min-height: 714px;
    transition: all .25s linear 0s;
}
#personalization .char {
    filter:grayscale(100%) opacity(100%);
}

#personalization .disabled {
    filter: grayscale(100%) opacity(50%);
    transition: filter 0.3s ease;
}
#personalization .enabled {
    filter: grayscale(0%) opacity(100%);
    transition: filter 0.3s ease;
}

/* ========================================
   LABELS DOS PERSONAGENS
   ======================================== */
/* Container do rótulo com nome da classe */
#personalization .label {
    position: absolute;
    font-style: italic;
    text-align: right;
    pointer-events: none;
}

/* Título da classe do personagem */
#personalization .label .title {
    display: block;
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 22px;
    line-height: 32px;
    color: #08bec8;
}

/* ========================================
   ANIMAÇÕES DOS LABELS
   ======================================== */
/* Animação do título quando personagem está habilitado */
#personalization .enabled .label .title {
    animation-delay: 0.1s;
    animation-name: fadeInLeft;
}

/* Animação do título quando personagem está desabilitado */
#personalization .none .label .title, #personalization .disabled .label .title {
    animation-delay: 0.3s;
    animation-name: fadeOutLeft;
}

/* Linha decorativa diagonal ao lado do label */
#personalization .label:before {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 1.5px;
    height: 60px;
    transform: rotate(15deg);
    background: #08bec8;
    animation-duration: .75s;
    animation-fill-mode: both;
}

/* Animação da linha decorativa quando habilitado */
#personalization .enabled .label:before {
    animation-delay: 0s;
    animation-name: resizeY15Down;
}

/* Animação da linha decorativa quando desabilitado */
#personalization .none .label:before, #personalization .disabled .label:before {
    animation-delay: 0s;
    animation-name: resizeY15Up;
}

/* Descrição da classe do personagem */
#personalization .label .desc {
    display: block;
    font-size: 13px;
    padding-right: 5px;
}

/* Animação da descrição quando habilitado */
#personalization .enabled .label .desc {
    animation-delay: 0.3s;
    animation-name: fadeInLeft;
    z-index: 10001 !important;
    position: relative;
}

/* Garantir que o container da classe habilitada fique na frente */
#personalization .enabled {
    z-index: 10000;
}

/* Animação da descrição quando desabilitado */
#personalization .none .label .desc, #personalization .disabled .label .desc {
    animation-delay: 0.1s;
    animation-name: fadeOutLeft;
}

/* ========================================
   PONTOS DE INTERAÇÃO
   ======================================== */
/* Container base para os pontos clicáveis */
#personalization .point {
    position: absolute;
    width: 28px;
    height: 28px;
}

/* Ícone visual do ponto (imagem de fundo) */
#personalization .point:after {
    display: block;
    content: "";
    width: 28px;
    height: 28px;
    background: url(../img/customization/point.png) center no-repeat;
    animation-duration: .75s;
    animation-fill-mode: both;
}

/* Animação do ponto quando personagem habilitado */
#personalization .enabled .point:after {
    animation-name: resizeIn45;
}

/* Animação do ponto quando personagem desabilitado */
#personalization .none .point:after, #personalization .disabled .point:after {
    animation-name: resizeOut45;
}

/* ========================================
   DESCRIÇÕES DOS PONTOS
   ======================================== */
/* Tooltip/descrição que aparece ao passar o mouse sobre o ponto */
#personalization .point .desc {
    position: absolute;
    font-size: 13px;
    left: 14px;
    top: 14px;
    width: 308px;
    height: 65px;
    padding: 18px 35px 18px 30px;
    line-height: 20px;
    background: url(../img/customization/bg1.png) no-repeat;
    pointer-events: none;
    animation-name: resizeOutLeft;
    animation-duration: .5s;
}

/* Animação da descrição quando ponto está em foco */
#personalization .focus .desc {
    animation-name: resizeInLeft;
}

/* Container interno para centralizar o texto verticalmente */
#personalization .point .desc div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Ajuste específico para Sacerdote com flexbox */
#personalization .sorcerer .point .desc div {
    position: static;
    top: auto;
    transform: none;
    width: 100%;
}

/* Forma triangular para quebra de texto (text wrap) */
#personalization .point .desc:before {
    position: relative;
    content: "";
    min-width: 20px;
    height: 12ex;
    float: left;
    shape-outside: polygon(0 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Forma triangular invertida para pontos específicos */
#personalization .point .flip:before {
    shape-outside: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ========================================
   CLASSES DE PERSONAGENS
   ======================================== */
/* WARLORD - Mago */
#personalization .warlord { /* Mago */
    left: calc(50% - 140px);
    animation-delay: 0.7s;
    animation-name: fadeInLeft;
}

/* Posicionamento do label do Warlord */
#personalization .warlord .label {
    left: -280px;
    top: 110px;
    width: 400px;
}

/* Pontos de interação específicos do Warlord */
#personalization .warlord .point:nth-child(3) {
    left: 100px;
    top: 275px;
}

#personalization .warlord .point:nth-child(4) {
    left: 50px;
    top: 387px;
}

#personalization .warlord .point:nth-child(5) {
    left: 80px;
    top: 516px;
}

/* Delays de animação sequencial para os pontos */
#personalization .warlord .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .warlord .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .warlord .point:nth-child(5):after {
    animation-delay: 0.5s;
}

/* Posicionamento da descrição do primeiro ponto */
#personalization .warlord .point:nth-child(3) .desc {
    top: -87px;
    left: -359px;
    animation-name: resizeOutRight;
}

/* Animação da descrição quando em foco */
#personalization .warlord .focus:nth-child(3) .desc {
    animation-name: resizeInRight;
}

/* PLAINSWALKER - Guerreiro */
#personalization .plainswalker { /* Guerreiro */
    left: calc(50% - 10px);
    animation-delay: 0.7s;
    animation-name: fadeInRight;
    z-index:  5;
}

/* Posicionamento do label do Plainswalker */
#personalization .plainswalker .label {
    left: -230px;
    top: 90px;
    width: 400px;
}

/* Pontos de interação específicos do Plainswalker */
#personalization .plainswalker .point:nth-child(3) {
    left: 126px;
    top: 264px;
}

#personalization .plainswalker .point:nth-child(4) {
    left: 62px;
    top: 383px;
}

#personalization .plainswalker .point:nth-child(5) {
    left: 124px;
    top: 466px;
}

/* Delays de animação sequencial para os pontos */
#personalization .plainswalker .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .plainswalker .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .plainswalker .point:nth-child(5):after {
    animation-delay: 0.5s;
}

/* Posicionamento da descrição com background específico */
#personalization .plainswalker .point:nth-child(3) .desc {
    left: -359px;
    background: url(../img/customization/bg2.png) no-repeat;
    animation-name: resizeOutRight;
}

/* Animação da descrição quando em foco */
#personalization .plainswalker .focus:nth-child(3) .desc {
    animation-name: resizeInRight;
}

/* SPELLHOWLER - Bárbaro */
#personalization .spellhowler {
    left: calc(50% - 320px);
    animation-delay: 1s;
    animation-name: fadeInLeft;
}

#personalization .spellhowler .label {
    left: -220px;
    top: 110px;
    width: 400px;
}

#personalization .spellhowler .point:nth-child(3) {
    left: 60px;
    top: 220px;
    z-index: 9;
}

#personalization .spellhowler .point:nth-child(4) {
    left: 130px;
    top: 373px;
}

#personalization .spellhowler .point:nth-child(5) {
    left: 80px;
    top: 448px;
}

#personalization .spellhowler .point:nth-child(6) {
    left: 51px;
    top: 476px;
}

#personalization .spellhowler .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .spellhowler .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .spellhowler .point:nth-child(5):after {
    animation-delay: 0.5s;
}

#personalization .spellhowler .point:nth-child(6):after {
    animation-delay: 0.7s;
}

/* SHILLIENKNIGHT - Feiticeira */
#personalization .shillienknight { /* Feiticeira */
    left: calc(50% + 156px);
    animation-delay: 1s;
    animation-name: fadeInRight;
}

#personalization .shillienknight .label {
    left: -280px;
    top: 140px;
    width: 400px;
}

#personalization .shillienknight .point:nth-child(3) {
    left: 40px;
    top: 275px;
}

#personalization .shillienknight .point:nth-child(4) {
    left: 80px;
    top: 379px;
}

#personalization .shillienknight .point:nth-child(5) {
    left: 70px;
    top: 494px;
}

#personalization .shillienknight .point:nth-child(6) {
    left: 50px;
    top: 535px;
}

#personalization .shillienknight .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .shillienknight .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .shillienknight .point:nth-child(5):after {
    animation-delay: 0.5s;
}

#personalization .shillienknight .point:nth-child(6):after {
    animation-delay: 0.7s;
}

#personalization .shillienknight .point:nth-child(6) .desc {
    top: -87px;
    left: -359px;
    animation-name: resizeOutRight;
}

#personalization .shillienknight .focus:nth-child(6) .desc {
    animation-name: resizeInRight;
}

/* SORCERER - Sacerdote */
#personalization .sorcerer { /* Sacerdote */
    left: calc(50% - 470px);
    animation-delay: 1.3s;
    animation-name: fadeInLeft;
}

/*#personalization .sorcerer img {
    transform: translateX(30px);
}*/

#personalization .sorcerer .label {
    left: -250px;
    top: 140px;
    width: 400px;
}

#personalization .sorcerer .point:nth-child(3) {
    left: 105px; /* Ajustado para dentro da largura de 180px */
    top: 280px;
}

#personalization .sorcerer .point:nth-child(3) .desc {
    width: 320px;
    height: 90px;
    padding: 5px 25px 0px 25px;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

#personalization .sorcerer .point:nth-child(4) {
    left: 60px; /* Ajustado para dentro da largura de 180px */
    top: 360px;
}

#personalization .sorcerer .point:nth-child(4) .desc {
    width: 320px;
    height: 90px;
    padding: 5px 25px 0px 25px;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

#personalization .sorcerer .point:nth-child(5) {
    left: 85px; /* Ajustado para dentro da largura de 180px */
    top: 450px;
}

#personalization .sorcerer .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .sorcerer .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .sorcerer .point:nth-child(5):after {
    animation-delay: 0.5s;
}

#personalization .sorcerer .point:nth-child(5) .desc {
    width: 320px;
    height: 90px;
    padding: 5px 25px 20px 25px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    z-index: 100;
}

/* WARSMITH - Arqueiro */
#personalization .warsmith { /* Arqueiro */
    left: calc(50% + 280px);
    animation-delay: 1.3s;
    animation-name: fadeInRight;
}

#personalization .warsmith .label {
    left: -250px;
    top: 140px;
    width: 400px;
}

#personalization .warsmith .point:nth-child(3) {
    left: 100px;
    top: 250px;
}

#personalization .warsmith .point:nth-child(4) {
    left: 50px;
    top: 350px;
}

#personalization .warsmith .point:nth-child(5) {
    left: 100px;
    top: 490px;
}

#personalization .warsmith .point:nth-child(6) {
    left: 45px;
    top: 569px;
}

#personalization .warsmith .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .warsmith .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .warsmith .point:nth-child(5):after {
    animation-delay: 0.5s;
}

#personalization .warsmith .point:nth-child(6):after {
    animation-delay: 0.7s;
}

#personalization .warsmith .point:nth-child(3) .desc {
    top: -87px;
    left: -359px;
    animation-name: resizeOutRight;
}

#personalization .warsmith .focus:nth-child(3) .desc {
    animation-name: resizeInRight;
}

#personalization .warsmith .point:nth-child(4) .desc {
    top: -87px;
    left: -359px;
    animation-name: resizeOutRight;
}

#personalization .warsmith .focus:nth-child(4) .desc {
    animation-name: resizeInRight;
}

#personalization .warsmith .point:nth-child(5) .desc {
    left: -359px;
    background: url(../img/customization/bg2.png) no-repeat;
    animation-name: resizeOutRight;
}

#personalization .warsmith .focus:nth-child(5) .desc {
    animation-name: resizeInRight;
}

#personalization .warsmith .point:nth-child(6) .desc {
    left: -359px;
    background: url(../img/customization/bg2.png) no-repeat;
    animation-name: resizeOutRight;
}

#personalization .warsmith .focus:nth-child(6) .desc {
    animation-name: resizeInRight;
}

/* ASSASSIN - Mercenário */
#personalization .assassin { /* Mercenário */
    left: calc(50% - 600px);
    animation-delay: 0.5s;
    animation-name: fadeInLeft;
}

#personalization .assassin .label {
    left: -250px;
    top: 150px;
    width: 400px;
}

#personalization .assassin .point:nth-child(3) {
    left: 50px; /* Ajustado para dentro da largura de 180px */
    top: 270px;
}

#personalization .assassin .point:nth-child(4) {
    left: 100px; /* Ajustado para dentro da largura de 180px */
    top: 380px;
}

#personalization .assassin .point:nth-child(4) .desc {
    top: -40px;
    left: -359px;
    animation-name: resizeOutRight;
    z-index: 15;
}

#personalization .assassin .point:nth-child(5) {
    left: 60px; /* Ajustado para dentro da largura de 180px */
    top: 500px;
}

#personalization .assassin .point:nth-child(5) .desc {
    top: -40px;
    left: -359px;
    animation-name: resizeOutRight;
    z-index: 15;
}

#personalization .assassin .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .assassin .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .assassin .point:nth-child(5):after {
    animation-delay: 0.5s;
}

#personalization .assassin .point:nth-child(3) .desc {
    top: -40px;
    left: -359px;
    animation-name: resizeOutRight;
    z-index: 15;
}

#personalization .assassin .focus:nth-child(3) .desc {
    animation-name: resizeInRight;
}

#personalization .assassin .focus:nth-child(4) .desc {
    animation-name: resizeInRight;
}

#personalization .assassin .focus:nth-child(5) .desc {
    animation-name: resizeInRight;
}

/* PALADIN - Espiritualista */
#personalization .paladin { /* Espiritualista */
    left: calc(50% + 410px);
    animation-delay: 1.5s;
    animation-name: fadeInRight;
}

#personalization .paladin .label {
    left: -270px;
    top: 150px;
    width: 400px;
}

#personalization .paladin .point:nth-child(3) {
    left: 100px;
    top: 250px;
}

#personalization .paladin .point:nth-child(4) {
    left: 50px;
    top: 350px;
}

#personalization .paladin .point:nth-child(5) {
    left: 80px;
    top: 490px;
}

#personalization .paladin .point:nth-child(3):after {
    animation-delay: 0.1s;
}

#personalization .paladin .point:nth-child(4):after {
    animation-delay: 0.3s;
}

#personalization .paladin .point:nth-child(5):after {
    animation-delay: 0.5s;
}

#personalization .paladin .point:nth-child(3) .desc {
    top: -87px;
    left: -359px;
    animation-name: resizeOutRight;
}

#personalization .paladin .focus:nth-child(3) .desc {
    animation-name: resizeInRight;
}

#personalization .paladin .point:nth-child(4) .desc {
    top: -87px;
    left: -359px;
    animation-name: resizeOutRight;
}

#personalization .paladin .focus:nth-child(4) .desc {
    animation-name: resizeInRight;
}

#personalization .paladin .point:nth-child(5) .desc {
    left: -359px;
    background: url(../img/customization/bg2.png) no-repeat;
    animation-name: resizeOutRight;
}

#personalization .paladin .focus:nth-child(5) .desc {
    animation-name: resizeInRight;
}

#content {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: #0b0e15 url(../img/content/background.jpg) center no-repeat;
    background-size: cover;
    z-index: -2;
}

#content .slider {
    position: relative;
    border-top: 3px solid #08bec8;
    border-bottom: 3px solid #08bec8;
    margin: 60px 0;
    animation-name: fadeIn;
}

#content .slider .slider-nav {
    position: absolute;
    top: calc(50% - 30px);
    background: 0 0;
    width: 30px;
    padding: 0;
    border: 0;
    height: 60px;
    z-index: 3;
    opacity: .5;
}

#content .slider .slider-nav svg {
        fill: #08bec8;
    pointer-events: none;
}

#content .slider .slider-nav.prev {
    left: 70px;
}
#content .slider .slider-nav.next {
    right: 70px;
}

#content .slider .slider-pages {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#content .slider .slider-pages li {
    position: relative;
}

#content .slider .slider-pages li span {
    display: block;
    font-family: var(--font-title);
    font-size: 26px;
    color: #fff;
    padding-top: 9px;
    text-align: center;
    margin: 0 16px;
    width: 48px;
    height: 36px;
    background: url(../img/circle.svg);
    background-size: contain;
    transform: scale(0.75);
    opacity: .5;
    transition: all .2s linear 0s;
}

#content .slider .slider-pages li:nth-child(1) span {
    padding-left: 1px;
    width: 47px;
}

#content .slider .slider-pages li.active span {
    transform: scale(1);
    opacity: 1;
}

#content .slider .slider-pages li:last-child:after {
    display: none;
}

#content .slider .slider-pages li:after {
    content: "";
    position: absolute;
    top: 23px;
    left: 70px;
    width: 20px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.45);
}

#content .slider .slider-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 600px;
    z-index: 1;
}

#content .slider .slider-wrapper>div {
    width: 100%;
    height: 100%;
    position: absolute;
    visibility: hidden;
}

#content .slider:not(.hidden) .slider-wrapper .visible {
    visibility: visible;
}

#content .slider .slider-wrapper>div:nth-child(1) {
    background: url(../img/content/bg1.jpg) center no-repeat;
}

#content .slider .slider-wrapper>div:nth-child(2) {
    background: url(../img/content/bg2.jpg) center no-repeat;
}

#content .slider .slider-wrapper>div:nth-child(3) {
    background: url(../img/content/bg3.jpg) center no-repeat;
}

#content .slider .slider-wrapper>div:nth-child(4) {
    background: url(../img/content/bg4.jpg) center no-repeat;
}

#content .slider .slider-wrapper>div:nth-child(5) {
    background: url(../img/content/bg5.jpg) center no-repeat;
}

#content .slider .slider-wrapper>div:nth-child(6) {
    background: url(../img/content/bg6.jpg) center no-repeat;
}

#content .slider .slider-wrapper>div .slider-text {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    max-width: 960px;
    height: 550px;
    margin: auto;
    padding: 0px 150px 50px 150px;
    z-index: 2;
}

#content .slider .slider-wrapper>div .slider-text>* {
    max-width: 550px;
    padding: 0px 30% 0px 0px;
}

#content .slider .slider-wrapper>div .slider-text h1 {
    font-family: var(--font-title);
    text-shadow: -1px 1px 1px #000;
    font-size: 18px;
    letter-spacing: .5px;
    line-height: 1.2em;
    letter-spacing: 1.2px;
    word-spacing: 3px;
                color: #08bec8;
    text-transform: uppercase;
    margin: 12px 0;
    animation-name: fadeInUp;
}

#content .slider .slider-wrapper>div .slider-text p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .7px;
    line-height: 1.4em;
    margin-bottom: 20px;
    text-shadow: -1px 1px 1px #000;
    animation-delay: 0.2s;
    animation-name: fadeInUp;
}

#content .slider .slider-wrapper>div .slider-text .icons {
    animation-delay: 0.4s;
    animation-name: fadeInUp;
}

#content .slider .slider-wrapper>div .slider-text .icons>img {
    border: 5px solid rgba(0, 0, 0, 0.25);
    margin-right: 5px;
}

#content .slider .slider-wrapper>div .slider-image {
    position: absolute;
    height: 600px;
    bottom: 0;
    z-index: 1;
    animation-name: fadeInRight;
}

#content .slider .slider-wrapper>div:nth-child(1) .slider-image {
    right: calc(min(0px, 50% - 918px));
}

#content .slider .slider-wrapper>div:nth-child(2) .slider-image {
    right: calc(min(0px, 60% - 741px));
}

#content .slider .slider-wrapper>div:nth-child(3) .slider-image {
    right: calc(min(0px, 40% - 775px));
}

#content .slider .slider-wrapper>div:nth-child(4) .slider-image {
    right: calc(min(0px, 60% - 772px));
}

#content .slider .slider-wrapper>div:nth-child(5) .slider-image {
    right: calc(min(0px, 80% - 1009px));
}

#content .slider .slider-wrapper>div:nth-child(6) .slider-image {
    right: calc(min(0px, 60% - 965px));
}

#rules {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0px;
    width: 100%;
    min-height: calc(max(100%, 100%));
    background: url(../img/teste/bg3.png) center no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Expansão total da seção regras no desktop */
@media (min-width: 1280px) {
    #rules {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        background-size: cover;
        background-position: center;
    }
}

#rules .section-header {
    top: 10px;
}

#rules .slider {
    position: relative;
    width: 100%;
    max-width: calc(min(1192px, 100% - 200px));
    height: 500px;
    border: 3px solid #08bec8;
    padding: 2px;
    margin: 70px auto;
    animation-name: fadeIn;
}

#rules .slider:before, #rules .slider:after {
    content: "";
    position: absolute;
    left: -9px;
    top: -9px;
    width: 12px;
    height: 522px;
    background: url(../img/rules/frame.png) center no-repeat;
}

#rules .slider:after {
    left: calc(100% - 3px);
    transform: rotate(180deg);
}

#rules .slider .slider-nav {
    position: absolute;
    top: calc(50% - 30px);
    background: 0 0;
    width: 30px;
    padding: 0;
    border: 0;
    height: 60px;
    z-index: 3;
    opacity: .5;
}

#rules .slider .slider-nav svg {
    fill: #08bec8;
    pointer-events: none;
}

#rules .slider .slider-nav.prev {
    left: -70px;
}

#rules .slider .slider-nav.next {
    right: -70px;
}

#rules .slider .slider-pages {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#rules .slider .slider-pages li {
    position: relative;
}

#rules .slider .slider-pages li img {
    display: block;
    margin: 0 10px;
    width: 15px;
    height: 15px;
    transform: scale(0.75);
    opacity: .5;
    transition: all .2s linear 0s;
    object-fit: contain;
}

#rules .slider .slider-pages li.active img {
    transform: scale(1);
    opacity: 1;
}

#rules .slider .slider-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 500px;
    z-index: 1;
}

#rules .slider .slider-wrapper>div {
    width: 100%;
    height: 100%;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

#rules .slider:not(.hidden) .slider-wrapper .visible {
    visibility: visible;
    opacity: 1;
}

#rules .slider .slider-wrapper>div:nth-child(1) {
    background: url(../img/rules/bg1.jpg) center no-repeat;
}

#rules .slider .slider-wrapper>div:nth-child(2) {
    background: url(../img/rules/bg2.jpg) center no-repeat;
}

#rules .slider .slider-wrapper>div:nth-child(3) {
    background: url(../img/rules/bg3.jpg) center no-repeat;
}

#rules .slider .slider-wrapper>div:nth-child(4) {
    background: url(../img/rules/bg4.jpg) center no-repeat;
}

#rules .slider .slider-wrapper>div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#olympiad {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: url(../img/teste/bg4.png) center no-repeat;
    background-size: cover;
    z-index: -2;
}

/* Expansão total da seção olympiad no desktop */
@media (min-width: 1280px) {
    #olympiad {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        background-size: cover;
        background-position: center;
    }
}

#olympiad .wrapper {
    width: 100%;
    max-width: 1580px;
    padding: 0 40px;
    margin: 0 auto;
    box-sizing: border-box;
}

#olympiad .wrapper .days {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 510px;
    margin-top: 60px;
    z-index: 2;
}

#olympiad .wrapper .days>div {
    display: flex;
    align-items: flex-end;
    width: calc(20% - 20px);
    background-color: #002730;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 30px calc(min(30px, 2%));
    min-height: 377px;
    box-sizing: border-box;
    animation-name: fadeInDown;
}

#olympiad .wrapper .days>div:nth-child(1) {
    background-image: url(../img/olympiad/day1.jpg);
    animation-delay: 0.4s;
}

#olympiad .wrapper .days>div:nth-child(2) {
    background-image: url(../img/olympiad/day2.jpg);
    animation-delay: 0.6s;
}

#olympiad .wrapper .days>div:nth-child(3) {
    background-image: url(../img/olympiad/day3.jpg);
    animation-delay: 0.8s;
}

#olympiad .wrapper .days>div:nth-child(4) {
    background-image: url(../img/olympiad/day5.jpg);
    animation-delay: 1s;
}

#olympiad .wrapper .days>div:nth-child(5) {
    background-image: url(../img/olympiad/day4.jpg);
    animation-delay: 1.2s;
}

#olympiad .wrapper .days>div .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#olympiad .wrapper .days>div .content i {
    width: 70px;
    height: 64px;
    margin: 0 auto;
    padding-top: 5px;
}

#olympiad .wrapper .days>div .content i:before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 150px;
    background-size: contain;
    transform: translateX(-50%) rotate(180deg);
    z-index: -1;
}

#olympiad .wrapper .days>div:hover .content i img {
    animation-duration: .75s;
    animation-fill-mode: both;
    animation-name: bounceIn;
}

/* Card 1 - Eventos Semanais de Guild */
#olympiad .wrapper .days>div:nth-child(1):hover .content i:before {
    top: 95px;
}

/* Card 2 - Guerras Territoriais */
#olympiad .wrapper .days>div:nth-child(2):hover .content i:before {
    top: 115px;
}

/* Card 3 - PvP Guild vs Guild */
#olympiad .wrapper .days>div:nth-child(3):hover .content i:before {
    top: 150px;
}

/* Card 4 - Ranking Individual */
#olympiad .wrapper .days>div:nth-child(4):hover .content i:before {
    top: 110px;
}

/* Card 5 - Recompensas da Season */
#olympiad .wrapper .days>div:nth-child(5):hover .content i:before {
    top: 60px;
}

#olympiad .wrapper .days>div .content strong {
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5em;
    margin: 15px auto 25px;
    max-width: 200px;
}

#olympiad .wrapper .days>div .content span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    padding: 10px 0px;
    width: 100%;
    text-transform: uppercase;
    background: rgba(8, 190, 200, 0.2);
}

#olympiad .wrapper .days>div .content p {
    font-size: 14px;
    line-height: 1.5em;
    color: #ffffff;
    visibility: hidden;
    height: 0;
    margin: 0px;
    opacity: 0;
    display: none;
}

#security {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 700px;
    z-index: -2;
}

/* Expansão total da seção segurança no desktop */
@media (min-width: 1280px) {
    #security {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
}

#security:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/clouds_bottom_down5.png) bottom no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 365px;
    pointer-events: none;
}

#security:before {
    top: 0;
    bottom: auto;
    transform: rotate(180deg);
    z-index: 1;
}

#security .back {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../img/security/background.jpg) 100% 100% no-repeat;
    background-size: calc(min(135%, 2560px)) calc(min(135%, 1200px));
    animation-name: fadeIn;
    z-index: -2;
}

/* #security .pattern {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../img/lines.png) repeat 50% 0;
    opacity: .3;
    z-index: -1;
} */

#security .char {
    position: absolute;
    left: 0;
    top: 100px;
    right: 0;
    bottom: 0;
    background: url(../img/security/char2.png) 100% 100% no-repeat;
    background-size: contain;
    pointer-events: none;
    animation-delay: 0.2s;
    animation-name: fadeIn;
}

#security .flames {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../img/security/flames.png) 50% 50% no-repeat;
    background-size: calc(min(127%, 2436px)) calc(min(127%, 1076px));
    pointer-events: none;
    animation-delay: 0.4s;
    animation-name: fadeInLeft;
}

#security .enemy:nth-child(7) {
    position: absolute;
    left: 0px;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../img/security/enemy1.png) 100% 100% no-repeat;
    background-size: calc(min(123%, 2800px)) calc(min(123%, 1440px));
    pointer-events: none;
    animation-delay: 1s;
    animation-name: fadeInUp;
    z-index: 20;
}

#security .enemy:nth-child(8) {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../img/security/enemy2.png) 100% 100% no-repeat;
    background-size: calc(min(123%, 2800px)) calc(min(123%, 1440px));
    pointer-events: none;
    animation-delay: 1.6s;
    animation-name: fadeInUp;
    z-index: 30;
}

#security .points, #security .backpoints {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: screen;
}

/* Textos completamente separados do container dos pontos */
.security-text {
    position: absolute;
    font-size: 13px;
    color: #000;
    width: 308px;
    height: 65px;
    padding: 18px 35px 18px 30px;
    line-height: 20px;
    background: url(../img/security/bg2.png) no-repeat;
    z-index: 10;
    pointer-events: none;
    animation-name: resizeOutLeft;
    animation-duration: .15s;
}

.security-text .text-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Efeito de formato triangular */
.security-text:before {
    position: relative;
    content: "";
    min-width: 20px;
    height: 12ex;
    float: left;
    shape-outside: polygon(0 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.security-text.flip:before {
    shape-outside: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Posicionamento específico para cada texto */
.security-text-1 {
    left: calc(50% - 320px + 35px);
    top: calc(50% - 50px - 66px);
}

.security-text-2 {
    left: calc(50% - 210px + 35px);
    top: calc(50% - 50px - 66px);
}

.security-text-3 {
    left: calc(50% - 90px + 35px);
    top: calc(50% - 66px);
}

.security-text-4 {
    left: calc(50% + 30px - 338px);
    top: calc(50% - 66px);
    background: url(../img/security/bg1.png) no-repeat;
    animation-name: resizeOutRight;
}

.security-text-5 {
    left: calc(50% + 150px - 338px);
    top: calc(50% - 15px - 66px);
    background: url(../img/security/bg1.png) no-repeat;
    animation-name: resizeOutRight;
}

.security-text-6 {
    left: calc(50% + 260px - 338px);
    top: calc(50% - 50px - 66px);
    background: url(../img/security/bg1.png) no-repeat;
    animation-name: resizeOutRight;
}

#security .backpoints {
    z-index: -1;
}

#security .point {
    position: absolute;
    width: 70px;
    height: 70px;
    animation-name: fadeInDown;
}

/* Manter apenas para compatibilidade com estrutura antiga */
#security .point .desc {
    position: absolute;
    font-size: 13px;
    color: #000;
    width: 308px;
    height: 65px;
    padding: 18px 35px 18px 30px;
    line-height: 20px;
    background: url(../img/security/bg2.png) no-repeat;
    z-index: 1;
    pointer-events: none;
    animation-name: resizeOutLeft;
    animation-duration: .15s;
}

#security .focus .desc,
.security-text.focus {
    animation-name: resizeInLeft;
}

#security .points .point:nth-child(4) .desc, #security .points .point:nth-child(5) .desc, #security .points .point:nth-child(6) .desc {
    left: -338px;
    background: url(../img/security/bg1.png) no-repeat;
    animation-name: resizeOutRight;
}

#security .points .focus:nth-child(4) .desc, #security .points .focus:nth-child(5) .desc, #security .points .focus:nth-child(6) .desc,
.security-text-4.focus,
.security-text-5.focus,
.security-text-6.focus {
    animation-name: resizeInRight;
}

#security .point .desc div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

#security .point .desc:before {
    position: relative;
    content: "";
    min-width: 20px;
    height: 12ex;
    float: left;
    shape-outside: polygon(0 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

#security .point .flip:before {
    shape-outside: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

#security .points .point:nth-child(1) {
    left: calc(50% - 320px);
    top: calc(50% - 50px);
    animation-delay: 2s;
}

#security .points .point:nth-child(2) {
    left: calc(50% - 210px);
    top: calc(50% - 15px);
    animation-delay: 2.2s;
}

#security .points .point:nth-child(3) {
    left: calc(50% - 90px);
    top: calc(50%);
    animation-delay: .4s;
}

#security .points .point:nth-child(4) {
    left: calc(50% + 30px);
    top: calc(50%);
    animation-delay: .6s;
}

#security .points .point:nth-child(5) {
    left: calc(50% + 150px);
    top: calc(50% - 15px);
    animation-delay: .8s;
}

#security .points .point:nth-child(6) {
    left: calc(50% + 260px);
    top: calc(50% - 50px);
    animation-delay: 1s;
}

#security .backpoints .point:nth-child(1) {
    left: calc(50% + 150px);
    top: calc(50% - 35px);
    animation-delay: 1.2s;
}

#security .backpoints .point:nth-child(2) {
    left: calc(50% + 30px);
    top: calc(50% - 50px);
    animation-delay: 1.4s;
}

#security .backpoints .point:nth-child(3) {
    left: calc(50% - 90px);
    top: calc(50% - 50px);
    animation-delay: 1.6s;
}

#security .backpoints .point:nth-child(4) {
    left: calc(50% - 210px);
    top: calc(50% - 35px);
    animation-delay: 1.8s;
}

#security .point .rotator {
    pointer-events: none;
}

#security .point .rotator>img {
    animation-name: floatV;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    pointer-events: none;
}

#security .focus .rotator>img {
    animation-play-state: paused;
}

#security .points .point:nth-child(1) .rotator>img {
    animation-delay: 2s;
}

#security .points .point:nth-child(2) .rotator>img {
    animation-delay: 2.2s;
}

#security .points .point:nth-child(3) .rotator>img {
    animation-delay: .4s;
}

#security .points .point:nth-child(4) .rotator>img {
    animation-delay: .6s;
}

#security .points .point:nth-child(5) .rotator>img {
    animation-delay: .8s;
}

#security .points .point:nth-child(6) .rotator>img {
    animation-delay: 1s;
}

#security .backpoints .point:nth-child(1) .rotator>img {
    animation-delay: 1.2s;
}

#security .backpoints .point:nth-child(2) .rotator>img {
    animation-delay: 1.4s;
}

#security .backpoints .point:nth-child(3) .rotator>img {
    animation-delay: 1.6s;
}

#security .backpoints .point:nth-child(4) .rotator>img {
    animation-delay: 1.8s;
}

#security footer {
    z-index: 100;
}

#download {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: #0b0e15 url(../img/background.jpg) center no-repeat;
    background-size: 100% 100%;
    z-index: -2;
}

#download .wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

#download .wrapper .container {
    position: relative;
}

#download .wrapper table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0px 50px 40px 50px;
}

#download .wrapper td, #download .wrapper th {
    padding: 0px;
    vertical-align: top;
    text-align: left;
}

#download .bgstep {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 30px);
    margin-top: 45px;
    border-radius: 5px;
    background: rgba(8, 190, 200, 0.2);
    align-self: stretch;
    border-bottom: 2px solid #08bec8;
    z-index: -1;
    animation-name: fadeInUp;
}

#download .wrapper .container .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-family: var(--font-title);
    color: #08bec8;
    font-size: 58px;
    width: 56px;
    z-index: 1;
    animation-name: bounceIn;
}

#download .wrapper .container .step:before {
    content: " ";
    position: absolute;
    width: 56px;
    height: 51px;
    margin-top: 23px;
    background: url(../img/circle.svg);
    background-size: contain;
    transform: rotate(.5turn);
    opacity: .3;
    z-index: -1;
}

#download .wrapper .container .name {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-subtitle);
    font-weight: 600;
    color: #08bec8;
    font-size: 14px;
    width: 56px;
    margin-top: 8px;
    animation-name: fadeInUp;
}

#download .wrapper .container .name::after {
    position: absolute;
    content: attr(title);
    font-family: var(--font-subtitle);
    font-weight: 600;
    color: #08bec8;
    font-size: 22px;
    left: 76px;
    bottom: -2px;
    width: 60vw;
}

#download .wrapper .container .image {
    vertical-align: middle;
    text-align: right;
    min-width: 255px;
    animation-name: fadeInUp;
}

#download .wrapper .container .desc {
    font-size: 13px;
    letter-spacing: .7px;
    line-height: 25px;
    animation-name: fadeInUp;
}

.starter {
    width: 168px;
    height: 44px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: url(../img/download.png) top no-repeat;
}

.starter:after {
    content: "";
    position: absolute;
    width: 168px;
    height: 44px;
    background: url(../img/download.png) bottom no-repeat;
    transition: all .2s linear;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}

.starter:hover:after {
    opacity: 1;
    visibility: visible; 
}

#sevenrules {
    display: flex; 
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: #0b0e15 url(../img/teste/bg3.png) center no-repeat;
    background-size: cover;
    z-index: -2;
}

#sevenrules .wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

#sevenrules .wrapper .container {
    position: relative;
}

#sevenrules .wrapper table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0px 50px 40px 50px;
}

#sevenrules .wrapper td, #sevenrules .wrapper th {
    padding: 0px;
    vertical-align: top;
    text-align: left;
}

#sevenrules .bgstep {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 30px);
    margin-top: 45px;
    border-radius: 5px;
    background: rgba(8, 190, 200, 0.2);
    align-self: stretch;
    border-bottom: 2px solid #08bec8;
    z-index: -1;
    animation-name: fadeInUp;
}

#sevenrules .wrapper .container .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-family: var(--font-title);
    color: #08bec8;
    font-size: 58px;
    width: 56px;
    z-index: 1;
    animation-name: bounceIn;
}

#sevenrules .wrapper .container .step:before {
    content: " ";
    position: absolute;
    width: 56px;
    height: 51px;
    margin-top: 23px;
    background: url(../img/circle.svg);
    background-size: contain;
    transform: rotate(.5turn);
    opacity: .3;
    z-index: -1;
}

#sevenrules .wrapper .container .name {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-subtitle);
    font-weight: 600;
    color: #08bec8;
    font-size: 14px;
    width: 56px;
    margin-top: 8px;
    animation-name: fadeInUp;
}

#sevenrules .wrapper .container .name::after {
    position: absolute;
    content: attr(title);
    font-family: var(--font-subtitle);
    font-weight: 600;
    color: #08bec8;
    font-size: 22px;
    left: 76px;
    bottom: -2px;
    width: 60vw;
}

#sevenrules .wrapper .container .desc {
    font-size: 13px;
    letter-spacing: .7px;
    line-height: 25px;
    animation-name: fadeInUp;
}

#sevenrules .wrapper .container .desc a {
    color: #0099BB;
    transition: all .25s linear 0s;
}

#news {
    position: relative;
    width: 100%;
    background-image: url(../img/teste/bg5.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

#news::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 4, 15, 0.418);
    pointer-events: none;
}

#news .wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    padding: 100px 20px 40px 20px;
}

#news .wrapper .container {
    position: relative;
}

#news .wrapper table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0px 20px 0px 20px;
    width: 100% - 100px;
}

#news .wrapper td, #news .wrapper th {
    padding: 0px;
    vertical-align: top;
    text-align: left;
}


#news .wrapper .container img {
    max-width: 100%;
    height: auto;
}


#news .wrapper h3 {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 18px;
}

/* Estilos para o novo design do artigo */
.news-article {
    background: rgba(8, 190, 200, 0.1);
    border: 2px solid #08bec8;
    border-radius: 8px;
    padding: 30px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.news-article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(8, 190, 200, 0.05) 0%, rgba(8, 190, 200, 0.15) 100%);
    z-index: -1;
}

.article-header {
    margin-bottom: 30px;
    text-align: left;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.article-author {
    color: #08bec8;
    font-family: var(--font-subtitle);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.article-date {
    color: #ffffff;
    font-family: var(--font-subtitle);
    font-size: 12px;
    font-weight: 400;
}

.article-category {
    background: #08bec8;
    color: #00040f;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: var(--font-subtitle);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.article-title {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-align: left;
    line-height: 1.2;
}

.article-subtitle {
    color: #ffffff;
    font-family: var(--font-subtitle);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-align: left;
    opacity: 0.9;
    line-height: 1.4;
}

.article-content {
    position: relative;
}

/* Imagem principal do artigo */
.article-main-image {
    text-align: center;
    margin: 30px 0;
}

.article-main-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.article-main-image img:hover {
    transform: scale(1.02);
}

/* 3 imagens pequenas lado a lado */
.article-small-images {
    display: flex;
    gap: 15px;
    margin: 30px 0;
    justify-content: center;
    flex-wrap: wrap;
}

.small-image {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.small-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.small-image img:hover {
    transform: scale(1.05);
}

.article-text {
    color: #ffffff;
    font-family: var(--font-subtitle);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.article-text p {
    margin: 15px 0;
}

.article-text h3 {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 600;
    margin: 30px 0 15px 0;
    text-align: left;
}

.article-text mark {
    background: rgba(8, 190, 200, 0.3);
    color: #08bec8;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

/* Estilos para as tags do artigo */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 190, 200, 0.3);
}

.tag {
    background: rgba(8, 190, 200, 0.2);
    color: #08bec8;
    padding: 6px 12px;
    border-radius: 15px;
    font-family: var(--font-subtitle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(8, 190, 200, 0.4);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(8, 190, 200, 0.3);
    border-color: #08bec8;
    transform: translateY(-2px);
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .news-article {
        padding: 20px;
        margin: 10px 0;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .article-title {
        font-size: 24px;
    }
    
    .article-subtitle {
        font-size: 14px;
    }
    
    .article-text {
        font-size: 13px;
    }
    
    .article-text h3 {
        font-size: 18px;
    }
    
    .article-tags {
        justify-content: flex-start;
        margin-top: 20px;
        padding-top: 15px;
    }
    
    .tag {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .article-small-images {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .small-image {
        min-width: 100%;
        max-width: 100%;
    }
}


footer {
    position: relative;
    width: 100%;
    margin-top: auto;
    background: #00040f;
    z-index: 100;
}

#download footer, #security footer, #sevenrules footer {
    background: none;
}

footer table {
    width: 100%;
    height: 60px;
    max-width: 960px;
    margin: 0 auto;
    font-size: 12px;
}

footer ul li {
    display: inline-block;
}

footer ul li a {
    font-weight: 400;
    text-transform: uppercase;
    margin-right: 41px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all .25s linear 0s;
}

footer ul li a.language {
    margin-right: 0px;
}

footer ul li a.language img {
    position: absolute;
    left: -30px;
}

footer ul li a.language div {
    position: relative;
}

footer ul li:not(:first-child) a.menu:before { 
    content: "";
    position: absolute;
    left: -27px;
    width: 8px;
    height: 14px;
    background: url(../img/header_separator.png) bottom no-repeat;
}

footer span {
    color: #ffffff;
}

@media not all and (pointer:coarse) {
    #language .wrapper ul li a:hover {
        color: #08bec8;
        transition: all .25s linear 0s;
    }

    /* Regras de user-select da navbar antiga removidas */

    /* Regras de hover da navbar antiga removidas */

    #content .slider .slider-nav {
        user-select: none;
    }

    #content .slider .slider-nav:hover {
        cursor: pointer;
        opacity: 1;
    }

    #content .slider .slider-pages li {
        user-select: none;
    }
    
    #content .slider .slider-pages li span:hover {
        cursor: pointer;
        opacity: 1;
        transition: all .2s linear 0s;
    }

    #rules .slider .slider-nav {
        user-select: none;
    }

    #rules .slider .slider-nav:hover {
        cursor: pointer;
        opacity: 1;
    }

    #rules .slider .slider-pages li {
        user-select: none;
    }
    
    #rules .slider .slider-pages li span:hover {
        cursor: pointer;
        opacity: 1;
        transition: all .2s linear 0s;
    }

    #olympiad .wrapper .days>div {
        user-select: none;
    }

    #olympiad .wrapper .days>div:hover {
        padding-top: 170px;
        max-height: 100%;
    }

    #olympiad .wrapper .days>div:hover .content span {
        display: none;
        visibility: hidden;
        transition: all .3s ease 0s;
    }

    #olympiad .wrapper .days>div:hover .content p {
        display: inline;
        visibility: visible;
        height: auto;
        opacity: 1;
        transition: all .3s ease 0s;
    }

    #features .sidebar .menu a:hover {
        cursor: pointer;
        color: #08bec8;
        transition: all .25s linear 0s;
    }

    #features .sidebar .parts a:hover {
        cursor: pointer;
        color: #08bec8;
        transition: all .25s linear 0s;
    }

    #sevenrules .wrapper .container .desc a:hover {
        cursor: pointer;
        color: #08bec8;
        transition: all .25s linear 0s;
    }


/* Nova estrutura de notícia moderna */
.news-card {
    background: #08bec83d;
    border: 2px solid #08bec8;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-header {
    margin-bottom: 25px;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.news-author {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.news-date {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.news-tag {
    background: #08bec8;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-title {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.news-subtitle {
    color: #cccccc;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.news-hero-image {
    margin: 25px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.news-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.news-hero-image:hover img {
    transform: scale(1.02);
}

.news-content {
    color: #ffffff;
    line-height: 1.7;
    font-size: 15px;
}

.news-content h3 {
    color: #08bec8;
    font-family: var(--font-title);
    font-size: 22px;
    margin: 30px 0 15px 0;
    font-weight: 600;
}

.news-content p {
    margin-bottom: 15px;
}


.news-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.news-image-gallery img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.news-image-gallery img:hover {
    transform: scale(1.05);
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 190, 200, 0.3);
}

.tag {
    background: rgba(8, 190, 200, 0.1);
    color: #08bec8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(8, 190, 200, 0.3);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(8, 190, 200, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 190, 200, 0.2);
}

    footer ul li a:hover {
        cursor: pointer;
        color: #08bec8;
        transition: all .25s linear 0s;
    }
}

@media(min-width: 769px) {
    .animated {
        animation-duration: .75s;
        animation-fill-mode: both;
    }

    @keyframes fadeIn {
        from {opacity: 0}
        to {opacity: 1}
    }

    @keyframes fadeIn35 {
        from {opacity: 0}
        to {opacity: 0.35}
    }

    @keyframes fadeInUp {
        from {
            transition: .3s ease-out;
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: none;
            opacity: 1;
        }
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translate3d(0,-20px,0);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translate3d(-10%,0,0);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translate3d(10%,0,0);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes fadeInLeft35 {
        from {
            opacity: 0;
            transform: translate3d(-10%,0,0);
        }
        to {
            opacity: 0.35;
            transform: none;
        }
    }

    @keyframes fadeInRight35 {
        from {
            opacity: 0;
            transform: translate3d(10%,0,0);
        }
        to {
            opacity: 0.35;
            transform: none;
        }
    }

    @keyframes bounceIn {
        from,20%,40%,60%,80%,to {
            animation-timing-function: cubic-bezier(.215,.61,.355,1);
        }
        0% {
            opacity: 0;
            transform: scale3d(.3,.3,.3);
        }
        20% {
            transform: scale3d(1.1,1.1,1.1);
        }
        40% {
            transform: scale3d(.9,.9,.9);
        }
        60% {
            opacity: 1;
            transform: scale3d(1.03,1.03,1.03);
        }
        80% {
            transform: scale3d(.97,.97,.97);
        }
        to {
            opacity: 1;
            transform: scale3d(1,1,1);
        }
    }

    @keyframes resizeY15Down {
        from {
            transform: scale(1, 0) rotate(0deg);
        }
        to {
            transform: scale(1, 1) rotate(15deg);
        }
    }

    @keyframes resizeY15Up {
        from {
            transform: scale(1, 1) rotate(15deg);
        }
        to {
            transform: scale(1, 0) rotate(0deg);
        }
    }

    @keyframes fadeOutLeft {
        from {
            opacity: 1;
            transform: none;
            
        }
        to {
            opacity: 0;
            transform: translate3d(-10%,0,0);
        }
    }

    @keyframes resizeIn45 {
        from {
            opacity: 0;
            transform: scale(0.5, 0.5) rotate(-45deg);
        }
        to {
            opacity: 1;
            transform: scale(1, 1) rotate(0deg);
        }
    }

    @keyframes resizeOut45 {
        from {
            opacity: 1;
            transform: scale(1, 1) rotate(0deg);
        }
        to {
            opacity: 0;
            transform: scale(0.5, 0.5) rotate(-45deg);
        }
    }

    @keyframes resizeInLeft {
        from {
            opacity: 0;
            transform: translate(-25%, 0px) scale(0.5, 1);
        }
        to {
            opacity: 1;
            transform: translate(0px, 0px) scale(1, 1);
        }
    }

    @keyframes resizeOutLeft {
        from {
            opacity: 1;
            transform: translate(0px, 0px) scale(1, 1);
        }
        to {
            opacity: 0;
            transform: translate(-25%, 0px) scale(0.5, 1);
        }
    }

    @keyframes resizeInRight {
        from {
            opacity: 0;
            transform: translate(+25%, 0px) scale(0.5, 1);
        }
        to {
            opacity: 1;
            transform: translate(0px, 0px) scale(1, 1);
        }
    }

    @keyframes resizeOutRight {
        from {
            opacity: 1;
            transform: translate(0px, 0px) scale(1, 1);
        }
        to {
            opacity: 0;
            transform: translate(+25%, 0px) scale(0.5, 1);
        }
    }

    @keyframes floatV {
        from {
            transform: translate(0px, -15px);
        }
        50% {
            transform: translate(0px, 15px);
        }
        to {
            transform: translate(0px, -15px);
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }
}

/* Regras específicas para a logo em mobile e tablet */
@media (max-width: 1024px) {
    #home .wrapper .text .logo {
        transform: scale(2.0) translateY(40px) !important;
        transform-origin: center !important;
        width: 200px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 968px) {
    #home .wrapper .text .logo {
        transform: scale(1.8) translateY(40px) !important;
        transform-origin: center !important;
        width: 180px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    #home .wrapper .text .logo {
        transform: scale(1.6) translateY(40px) !important;
        transform-origin: center !important;
        width: 160px !important;
        max-width: 100% !important;
    }

    #home .wrapper .text .subtitle {
        font-size: 16px;
        top: -120px; /* Movido para cima da logo no mobile pequeno */
        margin: 0;
        letter-spacing: 1px;
    }

    /* Ajustes específicos para mobile pequeno - classes de personagens */
    #personalization .warlord {
        left: calc(50% - 100px);
        top: 30px;
    }

    #personalization .warlord .label {
        left: -50px;
        width: 150px;
        font-size: 12px;
    }

    #personalization .plainswalker {
        left: calc(50% - 5px);
        top: 30px;
    }

    #personalization .plainswalker .label {
        left: -80px;
        width: 150px;
        font-size: 12px;
    }

    #personalization .sorcerer {
        left: calc(50% - 300px);
    }

    #personalization .sorcerer .label {
        left: 50px;
        width: 150px;
        font-size: 12px;
    }
    
    /* Ajustes das caixas de texto do Sacerdote para mobile pequeno */
    #personalization .sorcerer .point .desc {
        width: 250px !important;
        height: 90px !important;
        padding: 12px 15px !important;
        font-size: 11px !important;
    }

    #personalization .spellhowler {
        left: calc(50% - 30px);
    }

    #personalization .shillienknight {
        left: calc(50% - 200px);
    }

    #personalization .shillienknight .label {
        left: -50px;
        width: 150px;
        font-size: 12px;
    }

    #personalization .warsmith {
        left: calc(50% - 10px);
    }
}

@media(max-width: 768px) {
    html, body {
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* Ajuste do scroll-padding para mobile */
    html {
        scroll-padding-top: 60px; /* Valor menor para mobile */
    }

    .hide-smartphone {
        display: none!important;
    }

    .show-smartphone {
        display: inherit;
    }

    .hidden {
        visibility: inherit;
    }

    #home {
        height: auto;
    }

    #home .wrapper {
        padding: 100px 20px 30px;
        min-height: 80vh;
    }

    #home .wrapper .text h1 {
        font-size: 23px;
        line-height: 1.2em;
        margin: 15px 0;
    }

    #home .wrapper .text p {
        font-size: 14px;
    }

    #home .wrapper .text .subtitle {
        font-size: 18px;
        top: -80px; /* Movido para cima da logo no mobile */
        margin: 0;
        letter-spacing: 1.5px;
    }

    #home .wrapper .play {
        animation-delay: 1s;
    }

    #home .wrapper .featureline {
        width: 340px;
    }

    .featureicon:before, .featureicon:after {
        display: none;
    }

    .featureicon:nth-child(5) {
        display: none;
    }

    #home .video {
        background: url(../img/home_bg.jpg) top center no-repeat;
        background-size: cover;
    }

    #home .video video {
        display: none;
    }

    .anchor {
        min-height: 60px;
    }

    .section-header h1 {
        font-size: 18px;
        margin: 10px 0 5px;
        text-align: center;
        padding: 0 20px;
    }

    .section-header p {
        font-size: 12px;
        padding: 0 20px;
    }

    #personalization {
        min-height: calc(max(950px, 100%));
    }
    
    #personalization .none .label, #personalization .disabled .label {
        display: none;
    }
   
    #personalization .char .point {
        display: none;
    }

    /* Ajustes de responsividade para classes de personagens em mobile */
    #personalization .warlord {
        left: calc(50% - 120px);
        top: 50px;
    }

    #personalization .warlord .label {
        top: 25px;
        left: -70px;
        width: 200px;
        font-size: 14px;
    }

    #personalization .plainswalker {
        left: calc(50% - 10px);
        top: 50px;
    }

    #personalization .plainswalker .label {
        left: -100px;
        width: 200px;
        font-size: 14px;
    }

    #personalization .spellhowler {
        top: 834px;
        left: calc(50% - 50px);
    }

    #personalization .sorcerer {
        top: 834px;
        left: calc(50% - 360px);
    }

    #personalization .sorcerer .label {
        left: 75px;
    }
    
    /* Ajustes das caixas de texto do Sacerdote para mobile */
    #personalization .sorcerer .point .desc {
        width: 280px !important;
        height: 100px !important;
        padding: 15px 20px !important;
        font-size: 12px !important;
    }
    
    #personalization .shillienknight {
        top: 1434px;
        left: calc(50% - 256px);
    }

    #personalization .shillienknight .label {
        left: -70px;
    }

    #personalization .warsmith {
        top: 1434px;
        left: calc(50% - 14px);
    }

    #personalization .warsmith .label {
        left: -220px;
    }

    #content .slider .slider-nav.prev {
        left: 10px;
    }
    #content .slider .slider-nav.next {
        right: 10px;
    }

    #content .slider .slider-pages {
        bottom: 10px;
    }

    #content .slider .slider-pages li:after {
        left: 65px;
        width: 10px;
    }

    #content .slider .slider-pages li {
        width: 60px;
    }

    #content .slider .slider-wrapper>div .slider-text {
        padding: 0px 50px 50px 50px;
    }

    #content .slider .slider-wrapper>div .slider-text>* {
        padding: 0px 10% 0px 0px;
    }

    #content .slider .slider-wrapper>div .slider-text h1 {
        font-size: 18px;
    }
    
    #content .slider .slider-wrapper>div .slider-text p {
        font-size: 12px;
    }

    #content .slider .slider-wrapper>div:nth-child(1) .slider-image {
        right: calc(min(0px, 70% - 918px));
        opacity: .5;
    }
    
    #content .slider .slider-wrapper>div:nth-child(2) .slider-image {
        right: calc(min(0px, 100% - 733px));
        opacity: .5;
    }
    
    #content .slider .slider-wrapper>div:nth-child(3) .slider-image {
        right: calc(min(0px, 65% - 775px));
        opacity: .5;
    }
    
    #content .slider .slider-wrapper>div:nth-child(4) .slider-image {
        right: calc(min(0px, 90% - 772px));
        opacity: .5;
    }
    
    #content .slider .slider-wrapper>div:nth-child(5) .slider-image {
        right: calc(min(0px, 130% - 1009px));
        opacity: .5;
    }
    
    #content .slider .slider-wrapper>div:nth-child(6) .slider-image {
        transform: scaleX(-1);
        right: calc(min(0px, 125% - 965px));
        opacity: .5;
    }

    #rules .slider {
        max-width: calc(min(1192px, 100% - 100px));
    }
    
    #rules .slider .slider-nav.prev {
        left: -40px;
    }
    
    #rules .slider .slider-nav.next {
        right: -40px;
    }


    #olympiad .wrapper {
        padding: 0 10px;
    }

    #olympiad .wrapper .days {
        flex-wrap: wrap;
        padding: 10px 0;
        margin-top: 50px;
        height: auto;
        justify-content: space-around;
    }

    #olympiad .wrapper .days>div {
        width: calc(33.3% - 10px);
        min-height: 210px;
        padding: 10px;
        padding-top: 50px;
        margin: 5px 0;
        position: relative;
        background-size: 100%;
    }

    #olympiad .wrapper .days>div:nth-child(4), #olympiad .wrapper .days>div:nth-child(5) {
        width: calc(50% - 10px);
    }

    #olympiad .wrapper .days>div:hover {
        padding-top: inherit;
    }

    #olympiad .wrapper .days>div .content {
        width: 100%;
        align-items: center;
        position: relative;
        z-index: 3;
    }

    #olympiad .wrapper .days>div .content span {
        display: none;
    }

    #olympiad .wrapper .days>div .content strong {
        font-size: 13px;
        line-height: 1.3em;
        margin: 10px 0 0;
    }

    #olympiad .wrapper .days>div .content p {
        display: none;
    }

    #security .back {
        background-size: calc(min(400%, 2560px)) calc(min(100%, 1080px));
    }

    #security .char {
        background-size: cover;
        transform: scale(0.7) !important;
        transform-origin: center !important;
    }
    
    /* Aproximar os pontos na seção security no mobile */
    #security .points .point:nth-child(1) {
        left: calc(50% - 200px) !important;
    }
    
    #security .points .point:nth-child(2) {
        left: calc(50% - 130px) !important;
    }
    
    #security .points .point:nth-child(3) {
        left: calc(50% - 60px) !important;
    }
    
    #security .points .point:nth-child(4) {
        left: calc(50% + 10px) !important;
    }
    
    #security .points .point:nth-child(5) {
        left: calc(50% + 80px) !important;
    }
    
    #security .points .point:nth-child(6) {
        left: calc(50% + 150px) !important;
    }

    #security .desc, #security .enemy {
        display: none;
    }
    
    /* Ocultar labels de security no mobile - só aparecerão após clique */
    .security-text {
        display: none !important;
    }
    
    .security-text.active {
        display: block !important;
    }
    
    /* Ajustar imagem char2 para ser totalmente expansiva no mobile */
    #security .char {
        background-position: center center !important;
        background-size: cover !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    #download .wrapper .container .image {
        min-width: 0px;
        margin: auto;
    }

    #news .wrapper .container .image {
        min-width: 0px;
        margin: auto;
    }

    .starter {
        margin: auto;
    }

    footer table {
        font-size: 8px;
    }
    
    /* Responsividade para nova estrutura de notícia */
    .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .news-title {
        font-size: 24px;
    }
    
    .news-subtitle {
        font-size: 14px;
    }
    
    .news-image-gallery {
        grid-template-columns: 1fr;
    }
    
    .news-tags {
        justify-content: center;
    }

    footer ul li a {
        margin-right: 17px;
    }

    footer ul li:not(:first-child) a.menu:before { 
        left: -14px;
    }
    
    /* Otimizações do footer para mobile */
    .footer-wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
    }
    
    .footer-nav ul {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
    
    .footer-nav ul li {
        margin: 0;
    }
    
    .footer-nav ul li a.menu {
        font-size: 14px;
        padding: 8px 0;
        margin-right: 0;
    }
    
    .footer-social {
        gap: 20px;
        margin-top: 10px;
    }
    
    .footer-social .social-icon {
        width: 40px;
        height: 40px;
        padding: 10px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 20px;
    }
    
    .footer-left span,
    .footer-right span {
        font-size: 12px;
    }
    
    /* Imagens do slider apenas para mobile */
    .slider-content img {
        display: block;
    }
    
    .slider-content .desktop-only {
        display: none;
    }
    
    .slider-content .mobile-only {
        display: block;
    }
    
    /* Versões mobile dos elementos de nuvens */
    #home:after {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
    
    #personalization:after {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
    
    #personalization:before {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
    
    #rules:before {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
    
    #olympiad:after {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
    
    #olympiad:before {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
    
    #rules:after {
        min-height: clamp(100px, 15vw, 200px);
        max-height: 200px;
        background-size: contain;
        opacity: 0.8;
    }
}

/* Imagens do slider apenas para desktop */
@media (min-width: 769px) {
    .slider-content .desktop-only {
        display: block;
    }
    
    .slider-content .mobile-only {
        display: none;
    }
}

@media(max-height: 600px) {
    header {
        display: none;
    }

    #home .wrapper .featureline {
        display: none;
    }

    #home .wrapper .play {
        animation-delay: 1s;
        margin: 10px auto 0;
    }
    /* DESATIVADO
    #home .wrapper .feature-divider-first {
        margin: var(--feature-divider-margin-top-mobile) auto 0;
    }
    */
    /* Regras removidas - agora estão nas regras de @media(max-width: 768px) */

    /* #personalization .sorcerer, #personalization .warsmith, #personalization .shillienknight {
        display: none;
    } */

    #content .slider .slider-nav.prev {
        left: 30px;
    }
    #content .slider .slider-nav.next {
        right: 30px;
    }

    #content .slider .slider-pages {
        bottom: 10px;
    }

    #content .slider .slider-wrapper>div .slider-text {
        padding: 0px 110px 50px 110px;
    }

    #olympiad .wrapper {
        padding: 0 10px;
    }

    #olympiad .wrapper .days {
        margin-top: 0px;
        padding: 10px 0;
    }

    #olympiad .wrapper .days>div:hover {
        padding-top: inherit;
    }

    #olympiad .wrapper .days>div .content {
        width: 100%;
        align-items: center;
        position: relative;
        z-index: 3;
    }

    #olympiad .wrapper .days>div .content span {
        display: none;
    }

    #olympiad .wrapper .days>div .content strong {
        margin: 10px 0 0;
    }

    #olympiad .wrapper .days>div .content p {
        display: none;
    }

    #security .back {
        background-size: calc(min(170%, 2560px)) calc(min(100%, 1080px));
    }

    #features .sidebar {
        padding: 20px 20px 20px 20px;
    }
    
    #features .wrapper {
        padding: 20px 15px 20px 235px;
    }

    #features .wrapper .topic:before, #features .wrapper .subtopic:before { 
        margin-top: -10px; 
        height: 10px;
    }

    .anchor {
        display: none;
    }
	
	footer ul li a {
        margin-right: 17px;
    }

    footer ul li:not(:first-child) a.menu:before { 
        left: -14px;
    }
}

/* Footer styles */
footer {
    background: #0b0e15;
    padding: 20px 0;
    border-top: 1px solid #0b1325;
}

.footer-wrapper {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 60px;
}

/* Estilos do footer para desktop */
@media (min-width: 769px) {
    .footer-wrapper {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 60px !important;
        padding: 0 20px !important;
    }
    
    .footer-nav ul {
        flex-direction: row !important;
        gap: 20px !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    .footer-nav ul li {
        margin: 0 !important;
    }
    
    .footer-nav ul li a.menu {
        font-size: 13px !important;
        padding: 0 !important;
        margin-right: 0 !important;
    }
    
    .footer-social {
        gap: 15px !important;
        margin-top: 0 !important;
        justify-content: center !important;
    }
    
    .footer-social .social-icon {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
    }
    
    .footer-bottom {
        flex-direction: row !important;
        text-align: left !important;
        padding: 20px 20px 0 !important;
    }
}

/* Expansão total do footer no desktop */
@media (min-width: 1280px) {
    .footer-wrapper {
        max-width: 100vw;
        width: 100%;
        padding: 0 60px;
    }
    
    .footer-bottom {
        max-width: 100vw;
        width: 100%;
        padding: 20px 60px 0;
    }
}

.footer-nav {
    display: flex;
    justify-content: center;
}

.footer-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    align-items: center;
}

.footer-nav ul li {
    position: relative;
    white-space: nowrap;
}

.footer-nav ul li a.menu:before {
    display: none !important;
}

.footer-nav ul li a.menu {
    font-size: 13px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.footer-social .social-icon:hover {
        color: #08bec8;
        transform: translateY(-2px);
        background: var(--navbar-glow);
        box-shadow: 0 4px 12px var(--navbar-hover-glow);
}

.footer-bottom {
    max-width: 960px;
    margin: 20px auto 0;
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left span,
.footer-right span {
    color: #c2c2c2;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/* ===== VIDEO OVERLAY ===== */
.video-overlay {
    position: absolute;
    top: 0px; /* Movido 20px para cima para evitar corte da imagem */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Acima do vídeo (z-index: 0) mas abaixo do conteúdo (z-index: 2+) */
    pointer-events: none; /* Permite cliques passarem através da imagem para o vídeo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-image {
    /* Imagem expansiva - cobre toda a área */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre toda a área mantendo proporção */
    object-position: center; /* Centraliza a imagem */
}

/* Responsividade - imagem sempre de ponta a ponta */
@media (max-width: 1024px) {
    .overlay-image {
        /* Mantém 100% de largura e altura em todos os dispositivos */
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .overlay-image {
        width: 100%;
        height: 100%;
    }
    

@media (max-width: 480px) {
    .overlay-image {
        width: 100%;
        height: 100%;
    }
}

/* Efeito hover opcional (se quiser interatividade) */
.video-overlay:hover .overlay-image {
    transform: scale(1.02);
    opacity: 1;
}

/* Garantir que o vídeo continue funcionando normalmente */
#home .video {
    pointer-events: auto; /* Permite cliques no vídeo */
}

#home .video video {
    pointer-events: auto; /* Permite controles do vídeo */
}

/* Expansão total do vídeo de fundo no desktop */
@media (min-width: 1280px) {
    #home .video {
        width: 100vw;
        max-width: 100vw;
    }
    
    #home .video video {
        width: 100vw;
        max-width: 100vw;
    }
    
    .video-overlay {
        width: 100vw;
        max-width: 100vw;
    }
    
    .overlay-image {
        width: 100vw;
        max-width: 100vw;
    }
}


/* ===== BASE (comum a todas as telas) ===== */
#home::after,
#personalization::after,
#personalization::before,
#rules::before,
#olympiad::after,
#olympiad::before,
#rules::after,
#security::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background-repeat: no-repeat;
  background-size: cover;

}

/* Garanta também position: relative nas seções */
#home, #personalization, #rules, #olympiad, #security, #about, #info, #team, #season, #download {
  position: relative;
}

/* ===== MOBILE (até 768px): controle 100% separado ===== */
@media (max-width: 768px) {
  /* ATIVE e ajuste livremente (edite valores conforme necessário) */
  #home::after {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down.png);
    height: clamp(120px, 26vw, 360px);
    background-position: bottom;
  }
  #personalization::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up.png);
    height: clamp(120px, 26vw, 360px);
    background-position: top;
  }
  #personalization::before {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down2.png);
    height: clamp(120px, 26vw, 360px);
    background-position: bottom;
  }
  #rules::before {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down3.png);
    height: clamp(120px, 26vw, 360px);
    background-position: bottom;
  }
  #olympiad::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up3.png);
    height: clamp(120px, 26vw, 360px);
    background-position: top;
  }
  #olympiad::before {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down4.png);
    height: clamp(120px, 26vw, 360px);
    background-position: bottom; /* preserva o original */
  }
  #rules::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up6.png);
    height: clamp(120px, 26vw, 360px);
    background-position: top;
  }
  #security::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up2.png);
    height: clamp(120px, 26vw, 360px);
    background-position: top;
  }
}

/* ===== DESKTOP (a partir de 769px): controle 100% separado ===== */
@media (min-width: 769px) {
  /* ATIVE/ajuste independentemente do mobile (edite valores conforme necessário) */
  #home::after {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down.png);
    height: clamp(150px, 20vw, 500px);
    background-position: bottom;
  }
  #personalization::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up.png);
    height: clamp(150px, 20vw, 500px);
    background-position: top;
  }
  #personalization::before {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down2.png);
    height: clamp(150px, 20vw, 500px);
    background-position: bottom;
  }
  #rules::before {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down3.png);
    height: clamp(150px, 20vw, 500px);
    background-position: bottom;
  }
  #olympiad::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up3.png);
    height: clamp(150px, 20vw, 500px);
    background-position: top;
  }
  #olympiad::before {
    display: block;
    bottom: 0;
    background-image: url(../img/clouds_bottom_down4.png);
    height: clamp(150px, 20vw, 500px);
    background-position: bottom;
  }
  #rules::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up2.png);
    height: clamp(150px, 20vw, 500px);
    background-position: top;
  }
  #security::after {
    display: block;
    top: 0;
    background-image: url(../img/clouds_bottom_up2.png);
    height: clamp(150px, 20vw, 500px);
    background-position: top;
  }
}

/* ===== ESTILOS PARA NOVAS SEÇÕES ===== */
/* Seção de Download */
#download {
  background: linear-gradient(135deg, #0b0e15 0%, #1a1f2e 100%);
  padding: 80px 0;
  color: white;
}

.download-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.download-item {
  background: rgba(8, 190, 200, 0.1);
  border: 1px solid rgba(8, 190, 200, 0.3);
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.download-item:hover {
  background: rgba(8, 190, 200, 0.2);
  border-color: rgba(8, 190, 200, 0.5);
  transform: translateY(-5px);
}

.download-item h3 {
  font-family: var(--font-title);
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #08bec8;
}

.download-item p {
  font-family: var(--font-text);
  margin-bottom: 25px;
  color: #ccc;
  line-height: 1.6;
}

.download-btn {
  display: inline-block;
  background: linear-gradient(45deg, #08bec8, #00a8b5);
  color: white;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-family: var(--font-subtitle);
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.download-btn:hover {
  background: linear-gradient(45deg, #00a8b5, #08bec8);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(8, 190, 200, 0.4);
}

/* Seção de Regras */
#rules {
  background: linear-gradient(135deg, #1a1f2e 0%, #0b0e15 100%);
  padding: 80px 0;
  color: white;
}

.rules-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rules-item {
  background: rgba(8, 190, 200, 0.1);
  border: 1px solid rgba(8, 190, 200, 0.3);
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.rules-item:hover {
  background: rgba(8, 190, 200, 0.2);
  border-color: rgba(8, 190, 200, 0.5);
  transform: translateY(-5px);
}

.rules-item h3 {
  font-family: var(--font-title);
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #08bec8;
}

.rules-item p {
  font-family: var(--font-text);
  color: #ccc;
  line-height: 1.6;
}

/* Responsividade para as novas seções */
@media (max-width: 768px) {
  .download-content,
  .rules-content {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 15px;
  }
  
  .download-item,
  .rules-item {
    padding: 30px 20px;
  }
  
  .download-item h3,
  .rules-item h3 {
    font-size: 1.5rem;
  }
}
}