/* =========================================
 *   1. IMPORTS & VARIÁVEIS DO TEMA E RESET
 *   ========================================= */

@import url('../css/fonts.css');

:root {
    --cor-creme: #FAEAD4;
    --cor-laranja: #EA6B32;
    --cor-ouro: #F6AD37;
    --cor-verde: #C5CF42;
    --cor-azul: #5FBAC8;
    --cor-azul-claro: var(--cor-azul);
    --cor-verde-claro: var(--cor-verde);
    --cor-roxo: #613F86;
    --cor-roxo-escuro: #251E46;
    --cor-esmeralda: #0d897f;
    --angulo: 10vw;

    /* Variáveis do Botão Menu (Facilita a responsividade) */
    --botao-right: 4vw;
    --botao-top: 22px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    background-color: var(--cor-creme);
    font-family: "Avenir", sans-serif;
    font-size: 20px;
}

img {max-width:100%;}

/* =========================================
 *   2. TIPOGRAFIA E ELEMENTOS BASE
 *   ========================================= */
p:not(:last-child), li:not(:last-child) { margin-bottom: 1em; }

strong { font-weight: 900; }

h1, h2, h3, h4, h5 {
    margin-bottom: 1em;
    font-weight: normal;
}

h1, h2, h3, h4, h5,
a.botao, a.botao-plain,
.tag-secao text, .star,
.textos-botao, .star-roxo,
.destaque-branco, span.destaque,
.faq-item summary, blockquote {
    font-family: "Lumios Typewriter New", sans-serif;
    line-height: 1.2;
}

ul {
    list-style-position: inside;
    margin-left: 20px;
}

ul li { line-height: 1em; }

/* Botões */
a.botao, a.botao-ouro {
    padding: 10px 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    clip-path: polygon(0% 0%, 100% 16%, 96% 100%, 1.5% 85%);
    font-size: 18px;
}

a.botao { background-color: var(--cor-roxo-escuro); color: var(--cor-ouro); }
a.botao-ouro { background-color: var(--cor-ouro); color: var(--cor-roxo-escuro); }

a.botao:hover { background-color: var(--cor-roxo); }
a.botao-ouro:hover { background-color: var(--cor-laranja); }

a.botao::after, a.botao-ouro::after {
    content: "";
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

a.botao::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23F6AD37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M15 16l4 -4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E");
}

a.botao-ouro::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23251E46' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M15 16l4 -4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E");
}

a.botao-plain {
    text-decoration: none;
    color: var(--cor-roxo-escuro);
    font-size: 20px;
    display: inline-table;
}

/* =========================================
 *   3. HEADER FIXO E BOTÃO
 *   ========================================= */
.header-fixo {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    padding: 20px 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    pointer-events: none;
}

.logo {
    color: var(--cor-roxo-escuro);
    transition: color .4s ease;
    position: fixed;
    top: 20px;
    left: 30px;
}

.logo svg { width: 70px; }

body.menu-aberto .logo { color: var(--cor-ouro); }

/* transição suave */
.logo{
    transition:
    opacity .3s ease,
    transform .3s ease;

    opacity:1;
    transform:translateY(0);
}

/* esconde quando rolou */
body.scrolled .logo{
    opacity:0;
    transform:translateY(-10px);

    pointer-events:none;
}

/* mantém visível se menu estiver aberto */
body.menu-aberto .logo{
    opacity:1;
    transform:translateY(0);

    pointer-events:auto;
}

/* só no mobile */
@media (min-width:768px){


    body.scrolled .logo{
        opacity:1;
        transform:none;
        pointer-events:auto;
    }

}

/* Lógica corrigida do Botão */
.botao-menu {
    position: fixed;
    top: calc(var(--botao-top) + 4px);
    right: var(--botao-right);
    width: 147px;
    height: 39px;
    background-color: var(--cor-roxo-escuro);
    clip-path: polygon(0% 14%, 97% 0%, 100% 100%, 0% 98%);
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    pointer-events: auto;
    transform: rotate(0deg);
    transition: background-color 0.4s ease, clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.botao-menu svg { position: absolute; top: 0; left: 0; }

.textos-botao {
    position: absolute;
    left: 65px; top: 8px;
    color: var(--cor-ouro);
    font-size: 19px;
    letter-spacing: 1px;
}

.txt-fechar { display: none; opacity: 0; }

.txt-menu, .txt-fechar, .linha-1, .linha-2, .linha-3 {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.botao-menu:not(.ativo):hover .linha-1 { d: path("M 17.4117 19.3715 L 48.6199 11.3715"); }
.botao-menu:not(.ativo):hover .linha-3 { d: path("M 17.4117 19.8715 L 48.6199 27.3715"); }

.botao-menu.ativo .txt-menu { opacity: 0; display: none; }
.botao-menu.ativo .txt-fechar { opacity: 1; display: block; }
.botao-menu.ativo .linha-1 { d: path("M 20.4117 8.8715 L 48.6199 27.3715"); }
.botao-menu.ativo .linha-2 { opacity: 0; }
.botao-menu.ativo .linha-3 { d: path("M 18.4117 26.8715 L 48.4117 10.8715"); }


body.menu-aberto .botao-menu { background-color: transparent; }

/* =========================================
 *   4. OVERLAY DO MENU DE TELA CHEIA
 *   ========================================= */
.menu-overlay {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100vh;
    background-color: var(--cor-roxo-escuro);
    z-index: 998;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    pointer-events: none;

    /* Lógica perfeita de expansão vinculada à variável do botão */
    clip-path: polygon(
        calc(100% - var(--botao-right) - 147px) calc(var(--botao-top) + 5.5px),
                       calc(100% - var(--botao-right) - 4.4px) var(--botao-top),
                       calc(100% - var(--botao-right)) calc(var(--botao-top) + 39px),
                       calc(100% - var(--botao-right) - 147px) calc(var(--botao-top) + 38.2px)
    );
    transform-origin: calc(100% - var(--botao-right) - 73.5px) calc(var(--botao-top) + 19.5px);
    transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body:has(#botaoMenu:hover):not(.menu-aberto) .menu-overlay { transform: rotate(-8deg); }

body.menu-aberto .menu-overlay {
    pointer-events: auto;
    clip-path: polygon(0% 0%, 100% 0%, 74.5% 100%, 0% 100%);
    transform: rotate(0deg);
}

body.menu-aberto .menu-contato {
    opacity: 1;
    transition: opacity 0.5s ease 0.6s;
}

.menu-overlay a { color: var(--cor-ouro); text-decoration: none; }

.menu-nav { display: flex; flex-direction: column; gap: 25px; width: 100%; margin: 150px 0 0 0; }
.menu-nav a {
    color: var(--cor-ouro);
    font-family: "Lumios Typewriter New", sans-serif;
    font-size: clamp(18px, 4.5vw, 25px);
    text-decoration: none;
    width: max-content;
    opacity: 0; transform: translateX(50px); transition: all 0.4s ease;
}

body.menu-aberto .menu-nav a { opacity: 1; transform: translateX(0); }
body.menu-aberto .menu-nav a:hover { color: white; transform: translateX(15px); }

/* =========================================
 *   5. ARQUITETURA PRINCIPAL DAS SEÇÕES
 *   ========================================= */
.secao {
    position: relative;
    padding-bottom: calc(var(--angulo) * 1.5);
    z-index: 1;
}

.secao::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(
        0 var(--topo-esq, 0%),
                       100% var(--topo-dir, 0%),
                       100% var(--base-dir, 100%),
                       0 var(--base-esq, 100%)
    );
}

.secao__inner { position: relative; z-index: 1; padding: 0 10px 10vh 10px; width:100%;margin:0 auto;}

.secao__inner .row  {width:100%;margin:0 auto;}

.queda-esquerda {
    --topo-esq: var(--angulo); --topo-dir: 0%;
    --base-dir: calc(100% - var(--angulo)); --base-esq: 100%;
    margin-top: calc(var(--angulo) * -2 - 1px);
    padding-top: calc(var(--angulo) * 1.5);
}

.queda-direita {
    --topo-esq: 0%; --topo-dir: var(--angulo);
    --base-dir: 100%; --base-esq: calc(100% - var(--angulo));
    margin-top: calc(var(--angulo) * -2 - 1px);
    padding-top: calc(var(--angulo) * 1.5);
}

.topo-reto {
    --topo-esq: 0%; --topo-dir: 0%;
    margin-top: 0; padding-top: 40px;
}

/* Modificadores de Cores */
.laranja::before {
    background-color: var(--cor-laranja);
    background-image: url('../img/rays.svg');
    background-size: 740px;
    background-repeat: no-repeat;
    background-position: -8%;
}

.laranja, .laranja p, .ouro, .creme, .verde, .azul { color: var(--cor-roxo-escuro); }
.laranja { font-size: 1.1em; }

.verde::before { background-color: var(--cor-verde); }
.azul::before { background-color: var(--cor-azul); }
.roxo::before { background-color: var(--cor-roxo); }
.roxo-escuro::before { background-color: var(--cor-roxo-escuro); }
.esmeralda::before { background-color: var(--cor-esmeralda); }
.ouro::before { background-color: var(--cor-ouro); }
.creme::before { background-color: var(--cor-creme); }

.roxo, .roxo-escuro, .esmeralda { color: var(--cor-creme); }

/* =========================================
 *   6. TAGS DOS TÍTULOS E ESTRELAS
 *   ========================================= */
.tag-secao {
    width: max-content;
    max-width: 90vw;
    background-color: var(--cor-roxo-escuro);
    clip-path: polygon(0% 14%, 97% 0%, 100% 100%, 0% 98%);
    padding: 15px 30px 9px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    top: -60px;
}

.secao-titulo {
    color: var(--cor-ouro);
    font-weight: normal; margin: 0; line-height: 1;
    font-size: clamp(29px, 4vw, 50px);
    white-space: normal; text-align: center;
}

.star, .star-roxo {
    transform: rotate(0deg); /* Corrigido de rotate: 0deg; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    text-align: center;
    margin-top: -50px;
}

.star {
    font-size: 28px;
    max-width: 630px;
    background-image: url(../img/star.svg);
    padding: 176px 0 0 0;
}

.star-roxo {
    font-size: 23px;
    max-width: 586px;
    background-image: url(../img/star-roxo.svg);
    padding: 130px 0 40px 0;
}

/* =========================
 *  INTRO LAMPEJO E ESTRELA
 * ========================= */


.intro-lampejo{
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cor-ouro);

    overflow: hidden;

    transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

.intro-lampejo.finalizada{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================
 * ESTRELA
 * ========================= */

.intro-estrela{
    width: 20px;
    height: 20px;

    background-image: url('../img/star.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    animation:
    introScale 2.2s cubic-bezier(.7,0,.15,1) forwards,
    introRotate 2.2s ease-out forwards;

    will-change: transform, opacity;
}


/* =========================
 * ROTAÇÃO
 * ========================= */

@keyframes introRotate{

    0%{
        transform: rotate(0deg);
    }

    70%{
        transform: rotate(160deg);
    }

    100%{
        transform: rotate(180deg);
    }

}


/* =========================
 * EXPANSÃO
 * ========================= */

@keyframes introScale{

    0%{
        scale: 1;
        opacity: 1;
    }

    70%{
        opacity: 1;
    }

    100%{
        scale: 1000;
        opacity: 0;
    }

}

/* =========================
 *  COOKIES BANNER
 * ========================= */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 320px;
    padding: 15px;
    background-color: var(--cor-roxo-escuro);
    color: var(--cor-creme);
    font-size: 14px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner.show {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner p { margin: 0; line-height: 1.4; }
.cookie-banner a { color: var(--cor-creme); }

.cookie-banner button {
    background-color: var(--cor-roxo);
    color: #fbf8f2;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    width: 60px;
    cursor: pointer;
}

.cookie-banner button:hover {
    background-color: var(--cor-laranja);
    color: var(--cor-roxo-escuro);
}

/* =========================================
 *   7. SEÇÕES ESPECÍFICAS
 *   ========================================= */
#abertura .secao__inner { height: 100vh; display: flex; align-items: center; }

#abertura img { display: none; }
#abertura p {  font-size: 22px; }



.quem-pode {
    line-height: 2; border: 2px dashed; padding: 30px 20px;
    border-radius: 30px; max-width: 450px;
    margin: 0 auto 40px auto; position: relative;
}

.quem-pode ul {padding:0;}

h2 { text-align: center; font-size: 1.3em; }

ul.quatro-percursos {

    list-style: none;
    padding: 0;
    margin: 0;
}
ul.quatro-percursos li {
    height: 100%;
    min-height: 210px;
    padding: 25px; background-repeat: no-repeat;
    background-size: cover;  line-height: 1.4; font-size: 0.9em;
}
ul.quatro-percursos h3 {
    text-transform: uppercase; font-size: 1em; font-style: italic;
    margin-bottom: 10px; font-family: 'AvenirBlack', sans-serif;
}
ul.quatro-percursos li:nth-child(odd) {
    background-color: var(--cor-laranja);
    clip-path: polygon(4% 2%, 97% 0%, 100% 100%, 0% 98%);
}
ul.quatro-percursos li:nth-child(even) {
    background-color: var(--cor-ouro);
    clip-path: polygon(0% 0%, 100% 2%, 97% 97%, 3% 100%);
}

.o-que-lampejo { margin-top: 0; }
blockquote { margin: 20px 0; font-size: 1.2em; }

.forma-textos { font-size: 0.9em; }
.forma-textos p { margin: 0 0 1em 0; }
.forma-textos h3 { font-family: 'AvenirBlack', sans-serif; text-transform: uppercase; font-style: italic; margin-bottom: -7px; }
.forma-textos h4 { font-family: 'AvenirBlack', sans-serif; margin: 1.5em 0 0.3em 0; font-size: 1.2em; }

#oficina h3 { font-family: "Avenir", sans-serif; font-size: 1.1em; color: var(--cor-ouro); margin-bottom: 10px; font-weight: bold; }
#oficina p a { color: var(--cor-ouro); }
.cidade-lista { margin: 10% 0; }

#alem-das-oficinas p a { color: var(--cor-esmeralda); }
#nos h3 { font-family: 'AvenirBlack', sans-serif; font-size: 1.1em; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; font-style: italic; }
#nos .intro { padding: 0; text-align: center; margin-bottom: 50px; }
#nos span.star-destaque { display: none; }

.mapa { display: none; }

.destaque-branco { color: var(--cor-creme); text-decoration: none; display: block; position: relative; top: 0; }
span.destaque { display: table; font-size: clamp(18px, 5vw, 30px); max-width: 510px; font-weight: normal; margin: 20px 0; }
span.star-destaque { background-image: url(../img/star.svg); width: 450px; height: 450px; background-size: cover; position: absolute; top: -60px; right: 100px; }

.forma-1 { clip-path: polygon(0% 4%, 100% 0%, 100% 100%, 3% 97%); padding: 60px 30px; }
.forma-2 { clip-path: polygon(4% 0%, 1000% 23%, 95% 97%, 0% 100%); padding: 60px 30px; }

#lampejos .star-destaque { display: none; }
#lampejos .botao-itens { max-width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; }
#lampejos .botao-itens a { font-size: 25px; background-position: 15px 9px; padding-left: 60px; background-repeat: no-repeat; background-size: 26px; display: inline-flex; width: 260px; }

.whats { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F6AD37' class='bi bi-whatsapp' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232'/%3E%3C/svg%3E"); }
.tele { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F6AD37' class='bi bi-telegram' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09'/%3E%3C/svg%3E"); }

.minus-5 { transform: rotate(-5deg); }
.plus-5 { transform: rotate(5deg); }

.lista-cidades { margin: 30px 0; }
.lista-cidades li { color: var(--cor-creme); }
.lista-cidades li::marker { color: var(--cor-laranja); }
.lista-cidades li a, .lista-cidades li a:hover { color: var(--cor-creme); text-decoration: none; }

.row.formas { align-items: flex-start; max-width: 100%; margin: 0 auto; flex-direction: column-reverse; }
.forma-conteudo { display: flex; gap: 24px; flex-direction: column; }
.forma-logo { width: 80px; height: auto; flex-shrink: 0; }
.forma-textos h3 { margin: 0; line-height: 1.1; }
.forma { background: var(--cor-creme); color: var(--cor-roxo-escuro); padding: 60px 30px; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 20px; }
.faq-item {
    padding-bottom: 10px; margin-bottom: 40px;
    background-image: linear-gradient(to right, var(--cor-roxo-escuro) 50%, transparent 50%);
    background-size: 30px 2px; background-repeat: repeat-x; background-position: left bottom;
}
.faq-item summary {
    list-style: none; cursor: pointer; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: ""; width: 32px; height: 32px; flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23251E46' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14m6-6-6 6m-6-6 6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: contain;
    transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-content { padding: 1em 0; }
.faq-content p { margin: 0; opacity: .9; max-width: 900px; }

/* Apoios e Parceiros */
section#apoio-parcerias { color: var(--cor-roxo-escuro); }
section#apoio-parcerias h3 { font-style: italic; text-transform: uppercase; font-size: 0.9em; font-family: 'AvenirBlack', sans-serif; }
#apoio-parcerias .tag-secao { position: initial; margin: 0 auto; }
#apoio-parcerias a { color: var(--cor-roxo-escuro); }
.parceiros { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.parceiros-intro, .parceiros-contato { max-width: 700px; margin: 0 auto; }
.parceiros-grupo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 25px; }
.parceiros-grupo h3 { margin: 0; }
.logos-grid { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; flex-direction: column; margin-bottom: 50px; }
.card-topo { display: flex; align-items: flex-start; gap: 30px; }
.card-identidade { width: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.card-identidade img { width: 150px; }
.card-conteudo { flex: 1; }
.card-conteudo h3 { margin-top: 0; }

#biblioteca .secao__inner { color: var(--cor-ouro); }

/* Grid de Cards */

.card-item h3 { margin: 0; font-size: 1.4em; }
.card-item p { margin: 0; font-size: 0.9em; }

/* Posts / Bibliotecas */
.post-card { width: 100%; aspect-ratio: 364 / 467;; position: relative; }
.post-link { position: relative; display: block; width: 100%; height: 100%; text-decoration: none; overflow: hidden; }
.post-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.post-inner {
    position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
    clip-path: path("M0 21.976 390.567 0 406 509 12.465 489.4z");
}
.post-thumb { height: 58%; }
.post-thumb-shape { width: 100%; height: 100%; overflow: hidden; clip-path: path("M0 22 390.5 0l9.5 312-392.5-8.5z"); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.post-link:hover .post-thumb img { transform: scale(1.08); }

.post-content {
    flex: 1; background-color: #6EC0D1; color: var(--cor-roxo-escuro);
    padding: 28px; display: flex; flex-direction: column; justify-content: space-between;
    transition: background-color .35s ease;


background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%23251E46' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M17 7 7 17M8 7h9v9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position: 30px 80%;
    background-size:30px 30px;
}
.post-content h3 {
    margin: 0; font-size: 1.3rem; line-height: 1.15;
    text-transform: uppercase; font-family: 'AvenirBlack', sans-serif; font-style: italic;margin: 0 0 30px 0;
}

.row > div:nth-child(11n + 2) .post-content { background-color: var(--cor-azul-claro); }
.row > div:nth-child(11n + 3) .post-content { background-color: var(--cor-verde); }
.row > div:nth-child(11n + 4) .post-content { background-color: var(--cor-ouro); }
.row > div:nth-child(11n + 5) .post-content { background-color: var(--cor-roxo); }
.row > div:nth-child(11n + 6) .post-content { background-color: var(--cor-esmeralda); }
.row > div:nth-child(11n + 7) .post-content { background-color: var(--cor-laranja); }
.row > div:nth-child(11n + 8) .post-content { background-color: var(--cor-verde); }
.row > div:nth-child(11n + 9) .post-content { background-color: var(--cor-azul-claro); }
.row > div:nth-child(11n + 10) .post-content{ background-color: var(--cor-roxo); }
.row > div:nth-child(11n + 11) .post-content{ background-color: var(--cor-ouro); }
.row > div:nth-child(11n + 12) .post-content{ background-color: var(--cor-laranja); }

.post-link:hover .post-content { background-color: var(--cor-creme) !important; }

.biblio .post-card { opacity: 1; transition: opacity .35s ease, transform .35s ease; margin: 10px 0; }
.biblio:hover .post-card { opacity: .35; }
.biblio .post-card:hover { opacity: 1; transform: translateY(-4px); }

.arrow {
    font-size: 0; content: ""; display: block; position: relative; top: 10px;
    width: 32px; height: 32px;


    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23251E46' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14m6-6-6 6m-6-6 6 6'/%3E%3C/svg%3E");

    background-repeat: no-repeat; background-position: center; background-size: contain;
    transition: transform .3s ease; transform: rotate(230deg); /* Simplificado a duplicidade aqui */
}

/* Prepara os itens para a animação */
.item-animado {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.item-animado.visivel { opacity: 1; transform: translateY(0); }

.botao-veja {
    background-color: var(--cor-ouro); color: var(--cor-roxo-escuro);
    padding: 10px 40px 10px 20px; margin: 20px auto; display: block;
    clip-path: polygon(4% 13%, 95% 14%, 98% 83%, 6.5% 85%);
    font-family: 'Lumios Typewriter New', serif; font-size: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23251E46' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14m-7-7h14'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 97% center;
}
.botao-veja:hover { background-color: var(--cor-verde); }

/* =========================================
 *   8. FOOTER
 *   ========================================= */
.footer-lampejo { background: var(--cor-roxo-escuro); padding: 50px 20px 40px 20px; color: var(--cor-creme); font-size: 0.7em; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; text-align: center; }
.footer-col h4 { font-size: 1rem; font-style: italic; margin-bottom: 10px; text-transform: uppercase; font-family: 'AvenirBlack', sans-serif; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li, .footer-col p { margin-bottom: 10px; line-height: 1.5; }
.footer-col a { color: #fff; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }

/* =========================================
 *   9. MEDIA QUERIES (RESPONSIVO)
 *   ========================================= */

/* Mobile (Ajustado para max-width: 767px para não conflitar com o tablet) */
@media (max-width: 767px) {


    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    body.menu-aberto .menu-overlay { clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%) }
    .card-topo { flex-direction: column; }
    .card-identidade { width: 100%; }
}

/* Tablet em diante */
@media (min-width: 768px) {






.botao-menu:hover { transform: rotate(-8deg); }

    :root {
        --botao-top: 62px;
        --botao-right: 70px;
    }

    .row.formas { flex-direction: row; }
    .logos-grid { flex-direction: row; }
    #lampejos .botao-itens { flex-direction: row; column-gap: 70px; }
    #lampejos .botao-itens a { font-size: 25px; background-position: 15px 9px; padding-left: 60px; background-repeat: no-repeat; background-size: 26px; display: inline-flex; width: 260px; }
    .star, .star-roxo { margin-top: -50px; }
    .logo { top: 40px; left: 30px; }
    .logo svg { width: 100px; }
    .faq-item summary { font-size: 1.7rem; }

    #abertura img { display: block; width: 100%;height: auto; margin-inline: auto; }
    #abertura .secao__inner { min-height: 60vh; }
    .laranja::before { background-size: auto 100%; background-position: right; }
    #nos span.star-destaque { display: block; top: -200px; }
    .star { padding: 120px 0 20px 150px; background-position: left; text-align: left; }



    .tag-esquerda { top: 90px; left: 50px; transform: rotate(-5deg); left: 13vw; }
    .tag-direita { top: 90px; right: 50px; transform: rotate(5deg); }
    .destaque-branco { font-size: 1.4em; }
    .tag-secao { position: absolute; z-index: 10; width: max-content; display: flex; align-items: center; justify-content: center; }

    .forma { padding: 100px 50px; }
    .forma-1 { clip-path: polygon(0% 0%, 91% 10%, 100% 96%, 3% 100%); position: relative; right: -30px; }
    .forma-2 { clip-path: polygon(4% 0%, 100% 13%, 95% 95%, 0% 100%); position: relative; top: left: 0px; padding-top: 100px; }
    .forma-conteudo { display: flex; gap: 24px; flex-direction: row; align-items: flex-start; }

    #apoio-parcerias { margin-top: -200px; }
    #em-jogo .secao__inner { transform: translateY(-10%); }
    #escola-popular .secao__inner { transform: translateY(-10%); }
    #oficina .secao__inner { padding-bottom: 150px; margin-top: -30px; }
    #alem-das-oficinas .secao__inner { padding-bottom: 0px; margin-top: -80px; }
    #nos .secao__inner { margin-top: 30px; }
    #apoio-parcerias .secao { padding-bottom: 50px; }
    #lampejos .secao__inner { margin-top: -50px; padding-bottom: 200px; }
    #lampejos .star-destaque { font-size: 0;
    position: absolute;
    top: -82px;
    right: 20vh;
    width: 500px;
    height: 500px; }
    #lampejos .tag-secao { top: -20px; transform: rotate(7deg); left: 12vw; }
    #lampejos .intro { margin: 0 auto; }
    #biblioteca .secao__inner { transform: translateY(-2%);         max-width: 70%}
    #nos .intro { padding: 30px 0 0 0; transform: translateY(-20%); }

    .card-identidade { flex-direction: column; align-items: center; }
    .card-identidade img { width: 130px; }

    /* Linhas Decorativas */
    .linhas-decorativas { position: absolute; left: 50%; transform: translateX(-50%); top: -290px; bottom: -50px; width: 99vw; margin-left: -1px; z-index: -1; pointer-events: none; overflow: hidden; }
    .linha { position: absolute; transform-origin: center; }
    .line-1 { width: 2px; height: 100%; top: 614px; left: 50%; transform: rotate(-5deg); background-image: linear-gradient(to bottom, var(--cor-roxo-escuro) 60%, transparent 60%); background-size: 2px 30px; background-repeat: repeat-y; }
    .line-2 { height: 2px; width: 150%; left: -25%; top: 35%; transform: rotate(4deg); background-image: linear-gradient(to right, var(--cor-roxo-escuro) 60%, transparent 60%); background-size: 30px 2px; background-repeat: repeat-x; }
    .line-3 { height: 2px; width: 150%; left: -25%; top: 60%; transform: rotate(-3deg); background-image: linear-gradient(to right, var(--cor-roxo-escuro) 60%, transparent 60%); background-size: 30px 2px; background-repeat: repeat-x; }

    .mapa { display: block; right: 20%; position: relative; width: min(780px, 50vw); aspect-ratio: 780 / 790; background: url('../img/mapa.svg') center center / contain no-repeat; }
    .footer-grid { text-align: left; }
}

/* Notebook pequeno / tablet horizontal */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --botao-right: 40px;
    }
    #abertura .secao__inner { height: 50vh; }
    #alem-das-oficinas .secao__inner { padding-bottom: 0px; margin-top: 0; }
    #abertura p { }
    #em-jogo .secao__inner { transform: translateY(-1%); }
    #escola-popular .secao__inner { transform: translateY(4%); }
    #nos span.star-destaque { display: block; top: -140px; right: 0; }
    #biblioteca .secao__inner { transform: translateY(-2%); }
    #lampejos .star-destaque { top: -4vh; right: 0; width: 60vh; height: 60vh; }
    #lampejos .intro { margin: 0 5%; }
    #lampejos .star-destaque { top: -100px; right: 0; width: 400px; height: 400px; }

    .biblio .post-card { margin: 10px 0; padding: 10px; }
    .star { left: -20px; position: relative; top: 60px; }
    .tag-esquerda { left: 3vw; }
    .tag-secao { top: 44px; }
    .forma-2 { clip-path: polygon(4% 0%, 100% 7%, 95% 95%, 0% 100%); padding-top: 100px; }

    .linhas-decorativas { top: -590px; }
    .line-1 { top: 924px; left: 53%; transform: rotate(-1deg); }
    .line-3 { top: 65%; }
    .menu-nav { display: flex; flex-direction: column; gap: 15px; }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 100%;
    }
}

/* Desktop Padrão */
@media (min-width: 1025px) and (max-width: 1366px) {
    :root {
        --botao-right: 60px;
    }
    #nos .tag-secao.tag-esquerda { top: 90px; }
    .secao { padding-left: 3vw; padding-right: 3vw; }
    .secao-titulo { font-size: clamp(28px, 3.5vw, 40px); }
    .cards-grid { gap: 30px; }
    .tag-esquerda { left: 4vw; }
    .tag-direita { right: 4vw; }

    #abertura p { max-width: 390px; font-size: 1.1em; margin-left: 90px; }
    #oficina .secao__inner, #lampejos .secao__inner, #biblioteca .secao__inner { padding-bottom: 150px; }
    .post-card { margin: 20px; }
    #lampejos .tag-secao { left: 6vw; }
    #lampejos .star-destaque { top: -20vh; }


    .tag-secao, .tag-esquerda, .tag-direita { top: 70px; }

    .linhas-decorativas { top: -400px; }
    .line-3 { top: 69%; }
    .line-1 { top: 765px; }
    .line-2 { top: 42%; }

    .forma { padding: 110px 80px 80px 40px; }
    .forma-1 { right: -20px; }
    .row.formas { max-width: 90%; }
    .arrow { top: -20px; }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1500px;
    }
}

/* Monitores Grandes */
@media (min-width: 1500px) {

    .lado-esquerdo{
        padding-left:4rem;

    }

    .lado-direito{
        padding-left:4rem;

    }

    .lado-esquerdo img{
        width:650px;
        max-width:100%;
    }

    .lado-direito p{
        max-width:450px;
    }

    #nos .secao__inner {
    margin-top: 50px;
    }

    .card-topo { padding:50px; }

        .star-roxo { max-width: 560px; transform: rotate(-10deg); background-position: left; padding: 60px 0 50px 110px; text-align: left; font-size: 27px; top: -60px; left: -60px; position: relative; }

    .forma-2 { top: -300px;}

     .o-que-lampejo { margin-top: -18.5em; }

    #nos .tag-secao.tag-esquerda { top: 130px; }
    .tag-esquerda { left: calc(44vw - 650px); }
    .tag-direita { right: calc(50vw - 650px); }
    .post-card { margin: 25px; }
    .forma { padding: 100px 70px 100px 50px; }

    .linhas-decorativas { top: -320px; }
    .line-1 { top: 600px; }
    .line-3 { top: 65%; }
    .arrow { top: -10px; }
    .menu-overlay { padding: 50px; }
}