/* about.css — desduplicado em 12/08/2026.
 *
 * O arquivo trazia o mesmo CSS duas vezes. A segunda cópia vencia por vir
 * depois na cascata, então qualquer ajuste feito na primeira não tinha
 * efeito nenhum. Isso explica correções que "não pegavam".
 *
 * Abaixo ficam apenas as regras que existiam só na primeira cópia
 * (mantidas na mesma posição relativa, antes do restante), seguidas da
 * segunda cópia inteira.
 */

/* Extraído de about.php — estilos específicos da página. */

/* =========================================================
           PALETA ALQUÍMICA & TIPOGRAFIA
           ========================================================= */
        :root {
            --gold-title: #B87333;
            --copper-main: #9c6650;
            --copper-dark: #4a271d;
            --text-ivory-bright: #F5EFE1;
            --text-ivory-base: #EAE3D2;
            --text-parchment: #CFC5B0;
            --bg-abyss: #050201;
            --font-title: "Cinzel", serif;
            --font-display: "Cinzel Decorative", cursive;
            --font-body: "Cormorant Garamond", serif;
        }

/* RESTAURAÇÃO DO DESENHO ORIGINAL DESTA PÁGINA
   Regras retiradas do antigo CSS interno e mantidas externamente.
   ========================================================= */
/* =========================================================
           PALETA ALQUÍMICA & TIPOGRAFIA
           ========================================================= */
        :root {
            --gold-title: #B87333;   
            --copper-main: #9c6650;
            --copper-dark: #4a271d;
            --text-ivory-bright: #F5EFE1; 
            --text-ivory-base: #EAE3D2;   
            --text-parchment: #CFC5B0;    
            --bg-abyss: #050201; 
            --font-title: 'Cinzel', serif; 
            --font-display: 'Cinzel Decorative', cursive; 
            --font-body: 'Cormorant Garamond', serif;
        }

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

        body {
            background: url('../../images/medieval-bg.png') no-repeat center center fixed;
            background-size: cover;
            background-color: var(--bg-abyss);
            font-family: var(--font-body);
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh; overflow-x: hidden;
        }

        .main-content {
            flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 40px 20px; width: 100%; max-width: 1050px;
        }

        .container { width: 100%; text-align: center; animation: emergeFromShadows 2s cubic-bezier(0.2, 0.8, 0.2, 1); }

        /* --- BOTÃO LOGO GRANDE (HERO) --- */
        .hero-logo-link { display: inline-block; margin-bottom: 15px; cursor: pointer; text-decoration: none; }
        .hero-logo-btn {
            width: 110px; height: 110px;
            background-image: url('../../images/logo-exotic-nova.webp');
            background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto; 
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.5s ease;
        }
        .hero-logo-link:hover .hero-logo-btn, .hero-logo-link:active .hero-logo-btn {
            background-image: url('../../images/logo-exotic-nova.webp');
            transform: scale(1.12) translateY(-5px); 
            filter: drop-shadow(0 15px 20px rgba(255, 140, 0, 0.35));
        }

        /* --- TÍTULO PRINCIPAL (MAGIA METÁLICA) --- */
        h1 {
            font-family: var(--font-display); 
            font-size: 3.5rem; 
            margin: 0 0 5px 0;
            font-weight: 900; 
            text-transform: uppercase; 
            letter-spacing: 3px;
            background: linear-gradient(90deg, #5c300d 0%, #b87333 25%, #ffdf73 50%, #b87333 75%, #5c300d 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,1)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.15));
        }

        .page-subtitle {
            font-family: var(--font-title); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 6px; 
            margin-bottom: 45px; display: inline-block; padding-bottom: 10px;
            border-bottom: 1px solid rgba(184, 115, 51, 0.3);
            color: var(--text-ivory-base);
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }

        /* --- PERGAMINHO MÍSTICO --- */
        .royal-box { 
            background-color: #050201;
            background-image: linear-gradient(145deg, #0f0805 0%, #050201 100%);
            background-size: auto; background-clip: padding-box;
            background-position: center; background-repeat: repeat;
            border: 50px solid transparent; 
            border-image-source: url('../../images/moldura-casa.webp');
            border-image-width: 125px; border-image-slice: 250; border-image-repeat: round; 
            padding: 83px 83px 83px 83px; 
            margin: 0 auto; max-width: 970px; 
            box-shadow: inset 0 0 60px rgba(0,0,0,1); 
            filter: drop-shadow(0 25px 50px rgba(0,0,0,0.95));
            position: relative;
        }

        /* --- ESPELHO DE OBSIDIANA --- */
        .text-backdrop {
            background: radial-gradient(circle at center, rgba(18, 10, 5, 0.6) 0%, rgba(5, 2, 1, 0.98) 100%);
            padding: 45px 35px;
            border-radius: 8px;
            border: 1px solid rgba(156, 102, 80, 0.1); 
            box-shadow: 0 20px 40px rgba(0,0,0,1), inset 0 0 50px rgba(0,0,0,0.8); 
            position: relative;
        }
        
        .convite-header { 
            font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 4px; margin-bottom: 25px; display: block; font-weight: 700; 
            background: linear-gradient(90deg, #5c300d 0%, #b87333 25%, #ffdf73 50%, #b87333 75%, #5c300d 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,1)); 
        }
        
        .convite-text { 
            font-family: var(--font-body); font-size: 1.55rem; color: var(--text-ivory-base); line-height: 1.6;
            margin-bottom: 25px; font-weight: 400; text-shadow: 0 3px 6px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.8); 
        }
        
        .convite-text strong { color: var(--text-ivory-bright); font-weight: 600; }

        .emphasis { 
            font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 2rem; display: block; margin: 30px 0; 
            color: var(--text-ivory-bright); letter-spacing: 2px; text-shadow: 0 0 20px rgba(234, 227, 210, 0.3), 0 4px 8px rgba(0,0,0,1);
        }
        
        .divider { height: 1px; width: 50%; margin: 35px auto; background: radial-gradient(circle, rgba(156,102,80,0.6) 0%, transparent 100%); }
        .symbols { font-size: 1.2rem; margin: 25px 0; letter-spacing: 2px; color: var(--copper-dark); text-shadow: 0 2px 4px rgba(0,0,0,1); }


        /* =========================================================
           BOTÃO INTUITIVO DOS CICLOS LUNARES
           ========================================================= */
        .lunar-toggle-btn {
            background: rgba(156, 102, 80, 0.08); 
            border: 1px solid rgba(184, 115, 51, 0.4);
            border-radius: 4px;
            color: var(--gold-title);
            font-family: var(--font-title);
            font-size: 1.1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 18px 30px;
            margin: 20px 0 10px 0;
            width: 100%;
            max-width: 450px;
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 15px rgba(184, 115, 51, 0.05);
        }

        .lunar-toggle-btn:hover { 
            background: rgba(184, 115, 51, 0.15);
            border-color: var(--gold-title);
            color: var(--glow-gold); 
            text-shadow: 0 0 10px rgba(184, 115, 51, 0.6); 
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.8), inset 0 0 20px rgba(184, 115, 51, 0.2);
        }
        
        .chevron-icon { 
            font-size: 0.9rem; 
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
        }
        
        .lunar-toggle-btn.active .chevron-icon { 
            transform: rotate(180deg); 
            color: var(--text-ivory-bright);
        }

        /* O GRANDE TRUQUE DO GRID PARA ANIMAÇÃO PERFEITA */
        .lunar-wrapper {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            width: 100%;
        }

        .lunar-wrapper.open { grid-template-rows: 1fr; }

        .lunar-inner {
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease 0s;
        }

        .lunar-wrapper.open .lunar-inner {
            opacity: 1;
            transition: opacity 0.8s ease 0.4s;
            padding-top: 20px;
        }

        /* --- TIMELINE LUNAR COM FOTOS --- */
        .lunar-timeline {
            position: relative;
            margin: 40px 0 20px 0;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        /* Linha central conectando as luas */
        .lunar-timeline::before {
            content: '';
            position: absolute;
            left: 35px; /* Exatamente no centro da foto da lua */
            top: 20px;
            bottom: 20px;
            width: 1px;
            border-left: 1px dashed rgba(184, 115, 51, 0.4);
            z-index: 0;
        }

        .phase-block { 
            display: flex;
            align-items: flex-start;
            gap: 25px;
            position: relative;
            z-index: 1; /* Mantém a foto acima da linha */
            text-align: left;
        }

        /* Estilização da Foto da Lua */
        .moon-photo {
            width: 70px; 
            height: 70px; 
            min-width: 70px;
            border-radius: 50%;
            border: 2px solid rgba(184, 115, 51, 0.6);
            box-shadow: 0 5px 15px rgba(0,0,0,0.9), 0 0 20px rgba(184, 115, 51, 0.15);
            object-fit: cover;
            /* Filtro alquímico */
            filter: sepia(60%) hue-rotate(-15deg) contrast(1.1) brightness(0.9);
            background-color: var(--bg-abyss);
        }

        .phase-content {
            flex: 1;
            padding-top: 5px;
        }

        .phase-title {
            font-family: var(--font-title);
            color: var(--gold-title);
            font-size: 1.1rem;
            letter-spacing: 2px;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .phase-text {
            font-family: var(--font-body);
            color: var(--text-ivory-base);
            font-size: 1.3rem;
            line-height: 1.6;
            text-shadow: 0 2px 4px rgba(0,0,0,1);
        }

        /* =========================================================
           BOTÃO PROSSEGUIR
           ========================================================= */
        .btn-prosseguir {
            display: inline-block; margin-top: 40px; padding: 18px 45px; 
            background: linear-gradient(180deg, rgba(20, 10, 5, 0.8) 0%, rgba(5, 2, 1, 0.9) 100%);
            border: 1px solid var(--copper-dark); border-radius: 2px;
            color: var(--text-parchment); text-decoration: none; text-transform: uppercase; letter-spacing: 4px; 
            font-size: 0.95rem; font-family: var(--font-title); font-weight: 700; 
            cursor: pointer; transition: all 0.4s ease; 
            box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.8);
            position: relative; overflow: hidden;
        }

        .btn-prosseguir:hover {
            border-color: var(--copper-main); color: var(--text-ivory-bright);
            box-shadow: 0 0 25px rgba(184, 115, 51, 0.3), inset 0 0 20px rgba(184, 115, 51, 0.2);
            text-shadow: 0 0 10px rgba(255, 223, 115, 0.5); transform: translateY(-2px);
        }

        @keyframes emergeFromShadows { 
            from { opacity: 0; transform: translateY(20px); filter: blur(5px); } 
            to { opacity: 1; transform: translateY(0); filter: blur(0); } 
        }

        @media (max-width: 768px) { 
            h1 { font-size: 2.4rem; } 
            .royal-box { padding: 26px 26px 26px 26px; border-width: 14px; border-image-width: 32px; }
            .text-backdrop { padding: 30px 15px; }
            .convite-header { font-size: 1.2rem; } 
            .convite-text, .phase-text { font-size: 1.3rem; }
            .emphasis { font-size: 1.6rem; }
            .hero-logo-btn { width: 90px; height: 90px; }
            
            .phase-block { gap: 15px; }
            .moon-photo { width: 55px; height: 55px; min-width: 55px; }
            .lunar-timeline::before { left: 27.5px; } 
            .lunar-toggle-btn { font-size: 0.95rem; padding: 15px 20px; }
        }

/* =========================================================
   Moldura no celular

   A regra de celular mais acima reduzia a borda para 30px mas
   não reduzia a arte, e ela ficava com a espessura do desktop:
   125px de cada lado numa caixa de 350px, cobrindo 71% dela.

   Aqui a arte encolhe junto com a borda. O limite que uso é a
   arte dos dois lados não passar de 45% da largura da caixa —
   acima disso o ornamento deixa de emoldurar e passa a
   competir com o texto.
   ========================================================= */
@media (max-width: 700px) {
    .royal-box {
        border-width: 14px;
        border-image-width: 32px;
        padding: 26px 26px 26px 26px;
    }
}

@media (max-width: 400px) {
    .royal-box {
        border-width: 10px;
        border-image-width: 24px;
        padding: 22px;
    }
}