/* --------------------------------------------------
   RESET PROFISSIONAL + RESPONSIVIDADE GLOBAL
-------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    font-size: clamp(17px, 1.8vw, 19px); /* ajuste dinâmico */
    line-height: 1.35;
}

/* --------------------------------------------------
   MODO DARK / LIGHT
-------------------------------------------------- */
body.dark {
    background: #111;
    color: #fff;
}

body.light {
    background: #f2f2f2;
    color: #000;
}

/* --------------------------------------------------
   CONTAINER MASTER
-------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1600px;   /* melhor visual 4K */
    margin: auto;
    padding: 0 16px;
}

/* --------------------------------------------------
   SWITCH MODE
-------------------------------------------------- */
.switch-area {
    text-align: right;
    margin: 10px 0 20px 0;
}

#theme-switch {
    padding: 10px 20px;
    border: none;
    background: #222;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.light #theme-switch {
    background: #ddd;
    color: #000;
}

#theme-switch:hover {
    transform: scale(1.06);
}

/* --------------------------------------------------
   TOPO DO SITE
-------------------------------------------------- */
.toposite img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
}

/* --------------------------------------------------
   NAVBAR
-------------------------------------------------- */
.navbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 25px);
    padding: 12px 0;
}

.navbar a {
    color: #fff;
    font-weight: bold;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    transition: .3s;
}

body.light .navbar a {
    color: #000;
}

.navbar a:hover {
    background: #ff0;
    color: #000;
    transform: scale(1.08);
}

/* --------------------------------------------------
   TÍTULO
-------------------------------------------------- */
.conteudo h1 {
    text-align: center;
    margin: 28px 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #fff;
}

body.light .conteudo h1 {
    color: #000;
}

/* --------------------------------------------------
   IMAGEM DO TOPO
-------------------------------------------------- */
.imagem-topo {
    text-align: center;
    margin: 25px 0;
}

.imagem-topo img {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 10px;
}

/* --------------------------------------------------
   REVISTA (2 colunas)
-------------------------------------------------- */
.revista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
}

.texto {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    text-align: justify;
    line-height: 1.4;
    hyphens: auto;
}

/* --------------------------------------------------
   CHAMADA AMARELA
-------------------------------------------------- */
.chamada-amarela {
    margin-top: 40px;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #ff0;
    animation: pulsar 1.8s infinite;
    font-weight: bold;
}

body.light .chamada-amarela {
    color: #000 !important;
}

@keyframes pulsar {
    0% { opacity: .5; }
    50% { opacity: 1; }
    100% { opacity: .5; }
}

/* --------------------------------------------------
   RODAPÉ
-------------------------------------------------- */
.rodape {
    margin-top: 45px;
    padding: 20px 10px;
    text-align: center;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: #ff0;
    animation: fadeRodape 3s infinite alternate;
}

body.light .rodape {
    color: #000 !important;
}

@keyframes fadeRodape {
    0% {opacity: .6;}
    100% {opacity: 1;}
}

/* --------------------------------------------------
   RESPONSIVIDADE PROFISSIONAL
-------------------------------------------------- */

/* MOBILE — até 900px */
@media (max-width: 900px) {

    .revista {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .imagem-topo img {
        max-width: 100%;
    }

    .navbar {
        gap: 6px;
    }

    body {
        font-size: clamp(17px, 4vw, 19px);
    }
}

/* SMARTPHONES PEQUENOS — até 480px */
@media (max-width: 480px) {

    .navbar a {
        padding: 8px 14px;
        font-size: 1rem;
    }

    .conteudo h1 {
        margin: 20px 0;
        font-size: 1.55rem;
    }

    .chamada-amarela {
        font-size: 1.3rem;
    }

    .rodape {
        font-size: 1.1rem;
    }
}

/* TABLETS — 900px a 1200px */
@media (min-width: 900px) and (max-width: 1200px) {

    .revista {
        gap: 35px;
    }

    .conteudo h1 {
        font-size: 2rem;
    }
}

/* MONITORES GRANDES — acima de 1600px */
@media (min-width: 1600px) {

    body {
        font-size: clamp(19px, 1vw + 12px, 26px);
    }

    .container {
        max-width: 1800px;
    }
}

/* ULTRAWIDE — acima de 2200px */
@media (min-width: 2200px) {

    .container {
        max-width: 2200px;
    }

    body {
        font-size: clamp(22px, 1vw + 14px, 28px);
    }
}

/* TV 4K / 8K — acima de 3000px */
@media (min-width: 3000px) {

    .container {
        max-width: 2600px;
    }

    body {
        font-size: clamp(26px, 1vw + 18px, 34px);
    }

    .conteudo h1 {
        font-size: 4rem;
    }

    .texto {
        font-size: 2rem;
    }
}