:root {
            --core-red: #ff0000;
            --red-glow: rgba(255, 0, 0, 0.6);
            --dark-bg: #050505;
            --card-bg: #0b0b0c;
        }

        body {
            background-color: var(--dark-bg);
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            line-height: 1.6;
        }

        /* Header Estilizado */
        header {
            height: 60vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(5, 5, 5, 1)),
                url('https://images.unsplash.com/photo-1516549655169-df83a0774514?auto=format&fit=crop&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-bottom: 2px solid var(--core-red);
            box-shadow: 0 0 30px var(--red-glow);
        }

        h1 {
            font-size: 3rem;
            color: var(--core-red);
            text-transform: uppercase;
            letter-spacing: 5px;
            text-shadow: 0 0 20px var(--red-glow);
            margin: 0;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #888;
            margin-top: 10px;
            letter-spacing: 2px;
        }

        /* Timeline Container */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 50px 20px;
        }

        .section {
            margin-bottom: 80px;
            position: relative;
            padding-left: 30px;
            border-left: 2px solid #333;
        }

        .section::before {
            content: '';
            position: absolute;
            left: -9px;
            top: 0;
            width: 16px;
            height: 16px;
            background: var(--core-red);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--core-red);
        }

        h2 {
            color: var(--core-red);
            text-transform: uppercase;
            font-size: 1.5rem;
            margin-top: 0;
        }

        /* Ajuste na base do card para permitir movimento */
        .highlight-box {
            background: var(--card-bg);
            border: 1px solid #222;
            padding: 25px;
            border-radius: 10px;
            display: block;
            /* Garante que o transform funcione */
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* Transição suave e elástica */
            cursor: pointer;
        }

        /* O efeito de passar o mouse corrigido */
        .highlight-box:hover {
            border-color: var(--core-red) !important;
            background: #121214 !important;
            /* Leve clareada no fundo */
            transform: translateY(-10px) scale(1.02);
            /* Sobe e cresce um pouco */
            box-shadow: 0 15px 35px rgba(255, 0, 0, 0.15);
            /* Sombra vermelha elegante */
        }

        .spec-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .spec-item {
            background: #111;
            padding: 20px;
            border-bottom: 3px solid var(--core-red);
            border-radius: 5px;
        }

        .spec-item strong {
            color: var(--core-red);
            display: block;
            margin-bottom: 5px;
        }

        .mission-vision {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            background: linear-gradient(45deg, #0a0a0a, #150505);
            padding: 40px;
            border-radius: 15px;
            border: 1px solid #333;
        }

        .footer-core {
            text-align: center;
            padding: 100px 20px;
            background: #000;
        }

        .btn-home {
            text-decoration: none;
            color: var(--core-red);
            border: 1px solid var(--core-red);
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: bold;
            transition: 0.3s;
        }

        .btn-home:hover {
            background: var(--core-red);
            color: #000;
            box-shadow: 0 0 30px var(--core-red);
        }

        .founder-tag {
            margin-top: 40px;
            font-size: 0.9rem;
            color: #666;
            line-height: 1.8;
        }

        strong.name {
            color: white;
            border-bottom: 1px solid var(--core-red);
        }

        /* --- SESSÃO DA HOMENAGEM VIVA --- */

        .homenagem-container {
            position: relative;
            background: #000;
            padding: 60px 20px;
            text-align: center;
            overflow: hidden;
            border-top: 2px solid #220000;
        }

        .ecg-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px);
            background-size: 30px 30px;
            z-index: 1;
        }

        .content-overlay {
            position: relative;
            z-index: 2;
        }

        @keyframes techPulseSync {

            0%,
            100% {
                filter: brightness(0.8);
                text-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
                opacity: 0.8;
            }

            50% {
                filter: brightness(1.3);
                text-shadow: 0 0 20px #ff0000;
                opacity: 1;
            }
        }

        @keyframes heartPulseReal {
            0% {
                transform: scale(1);
            }

            15% {
                transform: scale(1.3);
            }

            30% {
                transform: scale(1);
            }

            45% {
                transform: scale(1.15);
            }

            100% {
                transform: scale(1);
            }
        }

        /* ANIMAÇÕES DE MOVIMENTO DO TEXTO */
        @keyframes floatText {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes shakeAlert {
            0% {
                transform: translate(1px, 1px);
            }

            20% {
                transform: translate(-3px, 0px);
            }

            40% {
                transform: translate(1px, -1px);
            }

            60% {
                transform: translate(-3px, 1px);
            }

            80% {
                transform: translate(-1px, -1px);
            }

            100% {
                transform: translate(1px, -2px);
            }
        }

        .heart-icon {
            font-size: 3rem;
            color: #ff0000;
            display: inline-block;
            animation: heartPulseReal 1.5s infinite ease-in-out, techPulseSync 1.5s infinite ease-in-out !important;
        }

        .tech-title {
            animation: techPulseSync 1.5s infinite ease-in-out !important;
            color: #ff0000;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            letter-spacing: 3px;
            margin: 20px 0;
        }

        .typewriter-text {
            color: #fff;
            font-family: 'Courier New', monospace;
            max-width: 800px;
            margin: 0 auto;
            min-height: 100px;
            border-right: 3px solid #ff0000;
            display: block;
            /* Inicia com a flutuação suave */
            animation: floatText 4s ease-in-out infinite, techPulseSync 1.5s infinite ease-in-out;
            transition: color 0.5s ease;
        }

        /* Classe ativada no Alerta */
        .text-shaking {
            animation: shakeAlert 0.15s infinite !important;
            color: #ff3333 !important;
            text-shadow: 0 0 15px #ff0000 !important;
        }

        .homenagem-container::after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 10;
        }

        .btn-home {
            text-decoration: none;
            background: transparent;
            /* Fundo transparente como os outros */
            color: var(--core-red);
            border: 1px solid var(--core-red);
            padding: 15px 40px;
            border-radius: 5px;
            /* Bordas levemente arredondadas para combinar */
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .btn-home:hover {
            background: var(--core-red);
            color: #000;
            box-shadow: 0 0 30px var(--core-red);
        }

        h1 {
            color: #ff0000;
            /* O vermelho do seu título */
            text-transform: uppercase;
            animation: pulse-glow 3s infinite ease-in-out;
        }

        @keyframes pulse-glow {

            0%,
            100% {
                text-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
                transform: scale(1);
            }

            50% {
                text-shadow: 0 0 30px rgba(255, 0, 0, 0.8), 0 0 50px rgba(255, 0, 0, 0.4);
                transform: scale(1.02);
                /* Cresce levemente */
            }
        }

        .titulo-historia {
            overflow: hidden;
            border-right: .15em solid red;
            /* O cursor */
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: .15em;
            animation:
                typing 3.5s steps(40, end),
                blink-caret .75s step-end infinite;
        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes blink-caret {

            from,
            to {
                border-color: transparent
            }

            50% {
                border-color: red;
            }
        }

        /* Título com efeito de pulso e brilho */
        .titulo-vivo {
            color: #ff0000;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            /* Animação: nome | duração | repetição | suavidade */
            animation: pulso-neon 3s infinite ease-in-out;
        }

        @keyframes pulso-neon {

            0%,
            100% {
                text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
                transform: scale(1);
            }

            50% {
                text-shadow: 0 0 25px rgba(255, 0, 0, 1), 0 0 40px rgba(255, 0, 0, 0.6);
                transform: scale(1.03);
                /* Dá um leve "salto" para frente */
            }
        }

        /* Subtítulo que aparece deslizando de baixo para cima */
        .subtitulo-suave {
            color: #ccc;
            text-align: center;
            opacity: 0;
            /* Começa invisível */
            animation: entrada-suave 1.5s forwards;
            animation-delay: 0.8s;
            /* Espera quase 1 segundo para começar */
        }

        @keyframes entrada-suave {
            from {
                opacity: 0;
                transform: translateY(20px);
                /* Começa um pouco abaixo */
            }

            to {
                opacity: 1;
                transform: translateY(0);
                /* Sobe para a posição original */
            }
        }

        .linha-animada {
            height: 2px;
            /* Altura da linha */
            background-color: red;
            /* Cor da linha */
            width: 0;
            /* Começa invisível (sem largura) */
            margin: 20px auto;
            /* Centraliza e dá espaço */

            /* Animação: nome | duração | tipo de transição | mantém o estado final */
            animation: expandir-linha 2s ease-out forwards;
            animation-delay: 0.5s;
            /* Começa logo após o título aparecer */

            /* Efeito de brilho para combinar com o título */
            box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
        }

        @keyframes expandir-linha {
            from {
                width: 0;
            }

            to {
                width: 100%;
                /* Ou 80% se você quiser que ela não encoste nas bordas */
            }
        }

        /* Vamos aplicar direto na div que contém o texto da história */
        /* Se você não souber a classe, procure no HTML e coloque aqui */
        .box-texto,
        [class*="container-card"],
        section div.conteudo {
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
            cursor: pointer;
            border: 1px solid transparent;
        }

        /* O efeito ao passar o mouse */
        .box-texto:hover,
        [class*="container-card"]:hover,
        section div.conteudo:hover {
            background: rgba(255, 255, 255, 0.08) !important;
            /* Clareia o fundo levemente */
            transform: translateY(-5px) scale(1.01);
            /* Sobe um pouquinho e cresce */
            border: 1px solid rgba(255, 0, 0, 0.5);
            /* Cria uma borda vermelha suave */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 0, 0, 0.2);
        }

        .titulo-vivo {
            /* ... seu código atual ... */
            animation: pulso-neon 0.8s infinite ease-in-out;
            /* 0.8s é aprox. 75 BPM */
        }

        /* Efeito de Pulso de Monitor na Borda */
        .highlight-box::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: var(--core-red);
            transform: scaleY(0);
            /* Fica invisível inicialmente */
            transition: transform 0.3s ease;
        }

        .highlight-box:hover::before {
            transform: scaleY(1);
            /* Aparece ao passar o mouse */
            animation: border-pulse 1.2s infinite ease-in-out;
        }

        @keyframes border-pulse {

            0%,
            100% {
                opacity: 0.5;
                box-shadow: 0 0 0px var(--core-red);
            }

            50% {
                opacity: 1;
                box-shadow: 5px 0 15px var(--core-red);
            }
        }

        /* Container principal para alinhar o botão e o BPM lado a lado */
        .footer-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            /* Espaço entre o botão e o contador */
            margin-top: 40px;
            flex-wrap: wrap;
            /* Para não quebrar no celular */
        }

        /* Garante que o contador de BPM não tente ocupar a linha toda */
        #bpm-counter {
            margin: 0 !important;
            display: flex;
            align-items: center;
            padding: 10px 15px;
            white-space: nowrap;
        }

        /* Garante que o botão não tente ocupar a linha toda */
        .btn-proposito {
            margin: 0 !important;
            padding: 12px 25px;
            white-space: nowrap;
        }

        /* Aplica em todos os botões e no contador de BPM */
        .btn-proposito,
        .btn-home,
        #bpm-counter,
        #toggleAudio {
            display: inline-flex;
            /* Transforma o interior em flexível */
            align-items: center;
            /* Centraliza o ícone verticalmente com o texto */
            justify-content: center;
            /* Centraliza o conteúdo horizontalmente */
            gap: 10px;
            /* Espaço exato entre o ícone e o texto */
        }

        /* Ajuste específico para o SVG não ficar "pulando" */
        .btn-proposito svg,
        .btn-home svg,
        #bpm-counter svg {
            display: block;
            flex-shrink: 0;
            /* Impede o ícone de amassar se o texto for longo */
        }

        /* Miniatura da foto */
        .fundador-galeria {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .foto-item {
            position: relative;
            width: 150px;
            height: 150px;
            border: 2px solid #333;
            border-radius: 50%;
            /* Foto redonda estilo perfil */
            overflow: hidden;
            cursor: pointer;
            transition: 0.4s;
        }

        .foto-item:hover {
            border-color: var(--core-red);
            box-shadow: 0 0 20px var(--core-red);
            transform: scale(1.1);
        }

        .foto-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Estilo da Foto quando aberta (Lightbox) */
        .lightbox {
            display: none;
            /* Escondido por padrão */
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #foto-expandida {
            max-width: 80%;
            max-height: 70%;
            border: 3px solid var(--core-red);
            box-shadow: 0 0 50px rgba(255, 0, 0, 0.5);
            border-radius: 10px;
            animation: zoomIn 0.3s ease-out;
        }

        @keyframes zoomIn {
            from {
                transform: scale(0.5);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .btn-fechar {
            position: absolute;
            top: 40px;
            right: 40px;
            color: white;
            font-size: 50px;
            cursor: pointer;
        }

        .modal-galeria {
            display: none;
            /* Começa escondido */
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .modal-image {
            max-width: 80%;
            max-height: 80%;
            border: 3px solid var(--core-red);
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
            border-radius: 10px;
        }

        .modal-suporte {
            display: none;
            /* Começa escondido */
            position: fixed;
            z-index: 99999;
            /* Fica na frente de tudo */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.98);
            /* Fundo quase preto */
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #imagemExpandida {
            width: auto;
            height: auto;
            max-width: 90%;
            /* Não deixa a foto estourar a tela */
            max-height: 80vh;
            /* Limita a altura para caber no monitor */
            border: 4px solid var(--core-red);
            box-shadow: 0 0 40px rgba(255, 0, 0, 0.7);
            border-radius: 15px;
            display: block !important;
            /* Garante que ela não seja ocultada */
        }

        .botao-fechar {
            position: absolute;
            top: 20px;
            right: 35px;
            color: #fff;
            font-size: 50px;
            cursor: pointer;
            z-index: 100000;
        }

        .modal-view {
            display: none;
            /* Escondido por padrão */
            position: fixed;
            z-index: 99999;
            /* Fica na frente de tudo */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            /* Efeito moderno de fundo embaçado */
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #fotoPrincipal {
            max-width: 85%;
            /* Ocupa a tela mas deixa margem */
            max-height: 80vh;
            border: 3px solid #ff0000;
            /* Borda vermelha core */
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
            border-radius: 12px;
            display: block !important;
            /* Força a exibição */
            animation: zoomIn 0.3s ease;
        }

        #legendaPrincipal {
            color: white;
            margin-top: 15px;
            font-family: 'Courier New', Courier, monospace;
            letter-spacing: 2px;
            text-shadow: 0 0 5px red;
        }

        @keyframes zoomIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .fechar-x {
            position: absolute;
            top: 30px;
            right: 40px;
            color: white;
            font-size: 50px;
            cursor: pointer;
        }

        /* Estilo da foto estática na página */
        .foto-historia {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            /* Deixa a foto redonda */
            border: 3px solid var(--core-red);
            /* Borda vermelha */
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
            /* Brilho neon */
            object-fit: cover;
            /* Não deixa a imagem esticar */
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;
            margin: 20px auto;
            /* Centraliza na página */
        }

        /* Efeito ao passar o mouse */
        .foto-historia:hover {
            transform: scale(1.05);
            box-shadow: 0 0 35px var(--core-red);
        }

        .tech-pulse {
            color: #ff0000;
            /* O vermelho que você já usa */
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 2px;
            position: relative;
            display: inline-block;

            /* Animação de pulso e brilho */
            animation: cardiac-glow 2s infinite;
        }

        @keyframes cardiac-glow {

            0%,
            100% {
                text-shadow: 0 0 5px #ff0000, 0 0 10px #00ff88;
                transform: scale(1);
                opacity: 1;
            }

            10% {
                /* O "pico" do batimento */
                text-shadow: 0 0 20px #f8f8f4, 0 0 30px #0303f5;
                transform: scale(1.05);
            }

            20% {
                text-shadow: 0 0 5px #ff0000, 0 0 10px #00ff88;
                transform: scale(1);
            }

            /* O segundo batimento menor (característico do coração) */
            30% {
                transform: scale(1.03);
            }

            40% {
                transform: scale(1);
            }
        }

        .container-memorial {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        #fotoHomenagem {
            cursor: pointer;
            transition: opacity 0.5s ease;
            /* Efeito suave ao sumir */
        }

        .coracao-img {
            width: 150px;
            /* Ajuste conforme necessário */
        }

        





            .container-memorial {
                display: flex;
                flex-direction: column;
                /* Um embaixo do outro */
                align-items: center;
                justify-content: center;
                gap: 30px;
                margin: 50px 0;
                perspective: 1000px;
            }

            /* Estilo do Coração Cardiológico */
            .coracao-img {
                width: 150px;
                filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
                animation: heartPulseReal 1.2s infinite ease-in-out;
                z-index: 5;
            }

            /* Estilo da Foto que vai sumir */
            #fotoHomenagem {
                width: 220px;
                border-radius: 15px;
                border: 2px solid #333;
                transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            }

            /* Classe de animação: Voo e Sumiço */
            .efeito-voar {
                transform: translateY(-150px) scale(0) rotateY(180deg) !important;
                opacity: 0 !important;
                pointer-events: none;
            }