.elementor-2410 .elementor-element.elementor-element-5983a95{--display:flex;--background-transition:0.3s;}/* Start custom CSS for container, class: .elementor-element-5983a95 */<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Reunião Científica | DADMI · UNIFESP</title>
    <meta name="description"
        content="Webinar - Reunião Científica do Departamento de Anestesiologia, Dor e Medicina Intensiva da UNIFESP. Novas aulas todas as terças-feiras." />
    <script src="assets/iconify_654a1ef798a3.js"></script>
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
    <link href="assets/css2_ac990486f183.css" rel="stylesheet" />
    <script src="assets/resource_3fa48481346f.js"></script>
    <style>
        :root {
            --primary: #007bff;
            --primary-glow: rgba(0, 123, 255, 0.4);
            --bg: #050a14;
            --cursor-size: 20px;
            --cursor-hover-size: 80px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            cursor: none;
            overflow-x: hidden;
            background-color: var(--bg);
            color: white;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .font-heading {
            font-family: 'Montserrat', sans-serif;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }

        /* Glass Panel */
        .glass-panel {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: 0.5s;
            pointer-events: none;
            z-index: 20;
        }

        .glass-panel:hover::before {
            left: 100%;
            transition: 0.7s ease-in-out;
        }

        .glass-panel-hover:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-4px);
            box-shadow: 0 15px 40px rgba(0, 123, 255, 0.12);
        }

        /* Liquid Blobs */
        .liquid-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            z-index: -1;
            animation: float 10s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes float {
            0% {
                transform: translate(0, 0) scale(1);
            }

            100% {
                transform: translate(30px, 50px) scale(1.1);
            }
        }

        /* Custom Cursor */
        #cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--cursor-size);
            height: var(--cursor-size);
            background: white;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s, background-color .3s;
            mix-blend-mode: overlay;
            backdrop-filter: blur(2px);
        }

        #cursor.hovered {
            width: var(--cursor-hover-size);
            height: var(--cursor-hover-size);
            opacity: .5;
            background: rgba(0, 123, 255, 0.5);
            mix-blend-mode: normal;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        /* Noise */
        .noise-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 50;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            mix-blend-mode: overlay;
        }

        /* Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Split line hero */
        .split-line {
            overflow: hidden;
            display: block;
        }

        .split-line span {
            display: block;
            transform: translateY(100%);
            transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .hero-revealed .split-line span {
            transform: translateY(0);
        }

        /* Preloader */
        #preloader {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 1.5rem;
            transition: transform 0.9s cubic-bezier(0.86, 0, 0.07, 1);
        }

        #preloader.loaded {
            transform: translateY(-100%);
        }

        .loader-bar {
            width: 200px;
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .loader-progress {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--primary);
            width: 0%;
            transition: width 0.4s ease;
        }

        /* Input Group */
        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .input-group input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 0;
            color: white;
            outline: none;
            transition: border-color .3s;
            font-family: 'Open Sans', sans-serif;
        }

        .input-group label {
            position: absolute;
            top: 10px;
            left: 0;
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            transition: .3s ease all;
            font-size: 0.875rem;
        }

        .input-group input:focus {
            border-bottom-color: var(--primary);
        }

        .input-group input:focus~label,
        .input-group input:not(:placeholder-shown)~label {
            top: -14px;
            font-size: .7rem;
            color: var(--primary);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        /* Sponsor logos */
        .sponsor-text {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 1.25rem;
            letter-spacing: -0.02em;
            color: rgba(255, 255, 255, 0.7);
            transition: color 0.3s;
        }

        .sponsor-text:hover {
            color: white;
        }

        /* Pulse glow */
        @keyframes pulse-glow {

            0%,
            100% {
                box-shadow: 0 0 8px var(--primary-glow);
            }

            50% {
                box-shadow: 0 0 24px var(--primary-glow);
            }
        }

        .pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite;
        }

        /* Marquee */
        .marquee-container {
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            overflow: hidden;
        }

        .marquee-content {
            display: flex;
            animation: scroll 30s linear infinite;
            gap: 3rem;
            white-space: nowrap;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* Tab system */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>

<body class="text-white">
    <div id="cursor"></div>
    <div class="noise-overlay"></div>

    <!-- Preloader -->
    <div id="preloader">
        <div style="text-align:center;">
            <span class="font-heading"
                style="font-size:0.625rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.4);">DADMI
                · UNIFESP</span>
        </div>
        <div class="loader-bar">
            <div class="loader-progress" id="loader-progress"></div>
        </div>
        <span class="font-heading"
            style="font-size:0.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);"
            id="loader-text">Iniciando sistema</span>
    </div>

    <!-- Background Blobs -->
    <div style="position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;">
        <div class="liquid-blob"
            style="width:600px;height:600px;top:-150px;left:-150px;opacity:.18;animation-duration:18s;background:#007bff;">
        </div>
        <div class="liquid-blob"
            style="width:500px;height:500px;top:35%;right:-150px;opacity:.12;animation-duration:22s;animation-delay:-6s;background:#0050cc;">
        </div>
        <div class="liquid-blob"
            style="width:700px;height:700px;bottom:-200px;left:25%;opacity:.1;animation-duration:28s;animation-delay:-12s;background:#29C5F6;">
        </div>
    </div>

    <!-- NAV -->
    <nav style="position:fixed;width:100%;z-index:60;top:0;padding:1rem 0;">
        <div style="max-width:1280px;margin:0 auto;padding:0 1rem;">
            <div class="glass-panel"
                style="border-radius:9999px;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;">
                <!-- Logo -->
                <a href="#hero" class="cursor-hover"
                    style="display:flex;align-items:center;gap:.5rem;text-decoration:none;">
                    <div
                        style="width:2rem;height:2rem;border-radius:9999px;background:linear-gradient(135deg,#29C5F6,#0050cc);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(41,197,246,0.3);">
                        <span class="iconify text-white" data-icon="lucide:microscope" data-width="14"></span>
                    </div>
                    <span class="font-heading"
                        style="font-weight:700;font-size:1rem;letter-spacing:-.03em;white-space:nowrap;">REUNIÃO <span
                            style="color:#007bff;">CIENTÍFICA</span></span>
                </a>
                <!-- Nav Links Desktop -->
                <div style="display:none;" id="nav-links" class="nav-desktop">
                    <a href="#hero" class="cursor-hover nav-link"
                        style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s;">Home</a>
                    <a href="#webinares" class="cursor-hover nav-link"
                        style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s;">Webinares</a>
                    <a href="#sobre" class="cursor-hover nav-link"
                        style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s;">Sobre</a>
                    <a href="#acesso" class="cursor-hover nav-link"
                        style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s;">Login</a>
                </div>
                <!-- CTA Register -->
                <div style="display:flex;align-items:center;gap:.75rem;">
                    <a href="#acesso" class="cursor-hover"
                        style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.6);text-decoration:none;display:none;"
                        id="login-link">Entrar</a>
                    <a href="#acesso" class="cursor-hover" id="register-btn"
                        style="padding:.5rem 1.25rem;background:var(--primary);border-radius:9999px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:white;text-decoration:none;transition:all .3s;box-shadow:0 4px 20px rgba(0,123,255,0.3);">
                        Registro
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- HERO -->
    <header id="hero"
        style="position:relative;height:100vh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;">
        <!-- Monogram label top left -->
        <div style="position:absolute;top:7rem;left:1.5rem;z-index:20;display:none;" id="hero-label">
            <span class="glass-panel"
                style="padding:.25rem .75rem;border-radius:.25rem;font-size:.625rem;font-family:monospace;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);">[
                00. HOME ]</span>
        </div>
        <!-- BG mesh -->
        <div style="position:absolute;inset:0;z-index:0;">
            <div
                style="position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,123,255,0.15) 0%, transparent 70%);">
            </div>
            <div
                style="position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top, var(--bg), transparent);">
            </div>
        </div>
        <!-- Hero Content -->
        <div
            style="position:relative;z-index:10;text-align:center;padding:1.5rem;width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;">
            <!-- Badge -->
            <div class="reveal" style="margin-bottom:2rem;">
                <div class="glass-panel"
                    style="display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;border-radius:9999px;">
                    <span
                        style="width:.375rem;height:.375rem;border-radius:50%;background:var(--primary);animation:pulse 2s infinite;box-shadow:0 0 10px var(--primary);"></span>
                    <span
                        style="font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.7);">Departamento
                        DADMI · UNIFESP</span>
                </div>
            </div>
            <!-- Title -->
            <div style="margin-bottom:1rem;">
                <span class="font-heading"
                    style="font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.3em;color:var(--primary);display:block;margin-bottom:1rem;">Webinar</span>
                <h1 class="font-heading"
                    style="font-size:clamp(3.5rem, 12vw, 8rem);font-weight:700;line-height:.88;letter-spacing:-.03em;color:white;">
                    <span class="split-line"><span class="block">Reunião</span></span>
                    <span class="split-line"><span class="block"
                            style="background:linear-gradient(135deg,#007bff,#29C5F6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition-delay:80ms;">Científica</span></span>
                </h1>
            </div>
            <!-- Subtitle -->
            <p class="reveal"
                style="font-size:1.125rem;color:rgba(255,255,255,.6);font-weight:300;letter-spacing:.02em;margin-top:1.5rem;margin-bottom:2.5rem;max-width:28rem;">
                Novas aulas todas às <span
                    style="color:white;border-bottom:1px solid rgba(0,123,255,.5);padding-bottom:1px;">terças-feiras</span>
            </p>
            <!-- CTAs -->
            <div class="reveal"
                style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:3.5rem;">
                <a href="#acesso" class="cursor-hover"
                    style="padding:.875rem 2rem;background:var(--primary);border-radius:.75rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:white;text-decoration:none;transition:all .3s;box-shadow:0 8px 30px rgba(0,123,255,0.35);">
                    Assistir Webinares
                </a>
                <a href="#sobre" class="cursor-hover"
                    style="padding:.875rem 2rem;border-radius:.75rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.7);text-decoration:none;transition:all .3s;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);">
                    Saiba Mais
                </a>
            </div>
            <!-- Stats -->
            <div class="reveal" style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;">
                <div class="glass-panel" style="padding:.75rem 1.5rem;border-radius:.75rem;text-align:center;">
                    <div class="font-heading" style="font-size:1.5rem;font-weight:700;color:white;">Toda</div>
                    <div
                        style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);">
                        Terça-feira</div>
                </div>
                <div class="glass-panel" style="padding:.75rem 1.5rem;border-radius:.75rem;text-align:center;">
                    <div class="font-heading" style="font-size:1.5rem;font-weight:700;color:var(--primary);">100%</div>
                    <div
                        style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);">
                        Online & Gratuito</div>
                </div>
                <div class="glass-panel" style="padding:.75rem 1.5rem;border-radius:.75rem;text-align:center;">
                    <div class="font-heading" style="font-size:1.5rem;font-weight:700;color:white;">UNIFESP</div>
                    <div
                        style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);">
                        Referência Nacional</div>
                </div>
            </div>
        </div>
        <!-- Scroll hint -->
        <div style="position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:20;"
            class="reveal">
            <span
                style="font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.4);">Scroll</span>
            <div class="glass-panel"
                style="width:1px;height:3rem;background:linear-gradient(to bottom,var(--primary),transparent);border:none;">
            </div>
        </div>
    </header>

    <!-- PATROCINADORES MARQUEE -->
    <section style="padding:3rem 0;position:relative;z-index:10;border-top:1px solid rgba(255,255,255,.05);">
        <div style="max-width:1280px;margin:0 auto;padding:0 1.5rem;text-align:center;margin-bottom:1.5rem;">
            <span
                style="font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.3);">Apoio</span>
        </div>
        <div class="marquee-container">
            <div class="marquee-content">
                <!-- Repeat twice for infinite scroll -->
                <div style="display:flex;align-items:center;gap:4rem;padding:0 2rem;">
                    <span class="sponsor-text cursor-hover">CRISTÁLIA</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover">ASPEN</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover">BAXTER</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover">ACHÉ</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover"
                        style="color:rgba(255,255,255,.4);font-size:.875rem;letter-spacing:.15em;">Departamento
                        DADMI</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover"
                        style="color:rgba(255,255,255,.4);font-size:.875rem;letter-spacing:.15em;">UNIFESP</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                </div>
                <div style="display:flex;align-items:center;gap:4rem;padding:0 2rem;">
                    <span class="sponsor-text cursor-hover">CRISTÁLIA</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover">ASPEN</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover">BAXTER</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover">ACHÉ</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover"
                        style="color:rgba(255,255,255,.4);font-size:.875rem;letter-spacing:.15em;">Departamento
                        DADMI</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                    <span class="sponsor-text cursor-hover"
                        style="color:rgba(255,255,255,.4);font-size:.875rem;letter-spacing:.15em;">UNIFESP</span>
                    <span style="color:rgba(255,255,255,.2);">·</span>
                </div>
            </div>
        </div>
    </section>

    <!-- WEBINARES -->
    <section id="webinares" style="padding:8rem 0;position:relative;z-index:10;">
        <div style="max-width:1280px;margin:0 auto;padding:0 1.5rem;">
            <!-- Label -->
            <div style="margin-bottom:.5rem;" class="reveal">
                <span class="glass-panel"
                    style="display:inline-block;padding:.25rem .75rem;border-radius:.25rem;font-size:.625rem;font-family:monospace;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);">[
                    01. WEBINARES ]</span>
            </div>
            <!-- Section header -->
            <div
                style="display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:4rem;">
                <div class="reveal">
                    <h2 class="font-heading"
                        style="font-size:clamp(2rem,5vw,3.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:.75rem;">
                        Últimas<br><span style="color:rgba(255,255,255,.5);">Aulas</span>
                    </h2>
                    <p style="color:rgba(255,255,255,.5);font-size:1.125rem;max-width:28rem;">Conteúdo científico de
                        alta qualidade em Anestesiologia, Dor e Medicina Intensiva.</p>
                </div>
                <div class="reveal">
                    <a href="#acesso" class="cursor-hover"
                        style="display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.7);text-decoration:none;transition:all .3s;">
                        Ver todos
                        <span class="iconify" data-icon="lucide:arrow-right" data-width="14"></span>
                    </a>
                </div>
            </div>
            <!-- Webinar Cards Grid -->
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;">

                <!-- Card 1 -->
                <div class="glass-panel glass-panel-hover cursor-hover reveal"
                    style="padding:2rem;border-radius:1.25rem;delay:100ms;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
                        <div style="display:flex;align-items:center;gap:.5rem;">
                            <span class="iconify" data-icon="lucide:stethoscope" data-width="14"
                                style="color:var(--primary);"></span>
                            <span
                                style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);">Anestesiologia</span>
                        </div>
                        <span class="glass-panel"
                            style="padding:.25rem .5rem;border-radius:.25rem;font-size:.5625rem;color:rgba(255,255,255,.6);">Terça-feira</span>
                    </div>
                    <div
                        style="width:3.5rem;height:3.5rem;background:linear-gradient(135deg,rgba(0,123,255,.2),transparent);border:1px solid rgba(255,255,255,.1);border-radius:1rem;display:flex;align-items:center;justify-content:center;color:var(--primary);margin-bottom:1.5rem;">
                        <span class="iconify" data-icon="lucide:brain" data-stroke-width="1.5" data-width="24"></span>
                    </div>
                    <h3 class="font-heading"
                        style="font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:white;letter-spacing:-.01em;">
                        Anestesia Regional</h3>
                    <p style="font-size:.875rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:1.5rem;">
                        Técnicas avançadas em bloqueios nervosos periféricos guiados por ultrassom.</p>
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span
                            style="font-size:.625rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;">Prof.
                            Dr. Especialista</span>
                        <div style="width:2.5rem;height:2.5rem;border-radius:9999px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:white;transition:all .3s;"
                            class="cursor-hover">
                            <span class="iconify" data-icon="lucide:play" data-width="14"></span>
                        </div>
                    </div>
                    <!-- Arrow reveal -->
                    <div style="position:absolute;top:0;right:0;padding:1.5rem;opacity:.2;transition:opacity .5s;"
                        class="card-arrow">
                        <span class="iconify text-white" data-icon="lucide:arrow-up-right" data-width="20"></span>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="glass-panel glass-panel-hover cursor-hover reveal"
                    style="padding:2rem;border-radius:1.25rem;--reveal-delay:150ms;position:relative;overflow:hidden;">
                    <div
                        style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,123,255,.15),rgba(41,197,246,.05));z-index:0;">
                    </div>
                    <div style="position:relative;z-index:1;">
                        <div
                            style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
                            <div style="display:flex;align-items:center;gap:.5rem;">
                                <span class="iconify" data-icon="lucide:activity" data-width="14"
                                    style="color:#29C5F6;"></span>
                                <span
                                    style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);">Med.
                                    Intensiva</span>
                            </div>
                            <span class="glass-panel"
                                style="padding:.25rem .5rem;border-radius:.25rem;font-size:.5625rem;color:rgba(255,255,255,.6);">Ao
                                vivo</span>
                        </div>
                        <div
                            style="width:3.5rem;height:3.5rem;background:linear-gradient(135deg,#007bff,#29C5F6);border-radius:1rem;display:flex;align-items:center;justify-content:center;color:white;margin-bottom:1.5rem;box-shadow:0 8px 20px rgba(0,123,255,.3);">
                            <span class="iconify" data-icon="lucide:heart-pulse" data-stroke-width="1.5"
                                data-width="24"></span>
                        </div>
                        <h3 class="font-heading"
                            style="font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:white;letter-spacing:-.01em;">
                            UTI — Ventilação Mecânica</h3>
                        <p style="font-size:.875rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:1.5rem;">
                            Protocolos modernos de ventilação protetora em pacientes críticos.</p>
                        <div style="display:flex;justify-content:space-between;align-items:center;">
                            <span
                                style="font-size:.625rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;">Medicina
                                Intensiva</span>
                            <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 4px 15px rgba(0,123,255,.4);"
                                class="cursor-hover">
                                <span class="iconify" data-icon="lucide:play" data-width="14"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card 3 -->
                <div class="glass-panel glass-panel-hover cursor-hover reveal"
                    style="padding:2rem;border-radius:1.25rem;--reveal-delay:200ms;position:relative;overflow:hidden;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
                        <div style="display:flex;align-items:center;gap:.5rem;">
                            <span class="iconify" data-icon="lucide:pill" data-width="14"
                                style="color:rgba(250,204,21,1);"></span>
                            <span
                                style="font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);">Dor
                                Crônica</span>
                        </div>
                        <span class="glass-panel"
                            style="padding:.25rem .5rem;border-radius:.25rem;font-size:.5625rem;color:rgba(255,255,255,.6);">Próxima
                            aula</span>
                    </div>
                    <div
                        style="width:3.5rem;height:3.5rem;background:linear-gradient(135deg,rgba(250,204,21,.2),transparent);border:1px solid rgba(250,204,21,.2);border-radius:1rem;display:flex;align-items:center;justify-content:center;color:rgba(250,204,21,.9);margin-bottom:1.5rem;">
                        <span class="iconify" data-icon="lucide:zap" data-stroke-width="1.5" data-width="24"></span>
                    </div>
                    <h3 class="font-heading"
                        style="font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:white;letter-spacing:-.01em;">
                        Tratamento da Dor Crônica</h3>
                    <p style="font-size:.875rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:1.5rem;">
                        Abordagens multimodais no manejo da dor persistente e suas implicações clínicas.</p>
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span
                            style="font-size:.625rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;">Clínica
                            da Dor</span>
                        <div style="width:2.5rem;height:2.5rem;border-radius:9999px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:white;"
                            class="cursor-hover">
                            <span class="iconify" data-icon="lucide:calendar" data-width="14"></span>
                        </div>
                    </div>
                    <div style="position:absolute;top:0;right:0;padding:1.5rem;opacity:.15;" class="card-arrow">
                        <span class="iconify text-white" data-icon="lucide:arrow-up-right" data-width="20"></span>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- SOBRE / INSTITUICIONAL -->
    <section id="sobre" style="padding:8rem 0;position:relative;z-index:10;border-top:1px solid rgba(255,255,255,.05);">
        <div style="max-width:1280px;margin:0 auto;padding:0 1.5rem;">
            <div style="display:grid;grid-template-columns:1fr;gap:4rem;align-items:center;" id="sobre-grid">
                <!-- Left -->
                <div class="reveal" style="max-width:38rem;">
                    <span class="glass-panel"
                        style="display:inline-block;padding:.25rem .75rem;border-radius:.25rem;font-size:.625rem;font-family:monospace;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);margin-bottom:2rem;">[
                        02. SOBRE ]</span>
                    <h2 class="font-heading"
                        style="font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem;">
                        Formação<br><span
                            style="background:linear-gradient(90deg,#007bff,#29C5F6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">contínua</span><br>de
                        excelência
                    </h2>
                    <p style="font-size:1.0625rem;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:2rem;">
                        Promovemos educação médica de alta qualidade por meio de webinares semanais com especialistas da
                        <strong style="color:white;">UNIFESP</strong> e convidados nacionais e internacionais.
                    </p>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem;">
                        <div class="glass-panel" style="padding:1.25rem;border-radius:1rem;">
                            <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.5rem;">
                                <span class="iconify" data-icon="lucide:video" data-width="16"
                                    style="color:var(--primary);"></span>
                                <span
                                    style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);">Webinares</span>
                            </div>
                            <div class="font-heading" style="font-size:1.75rem;font-weight:700;color:white;">200+</div>
                        </div>
                        <div class="glass-panel" style="padding:1.25rem;border-radius:1rem;">
                            <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.5rem;">
                                <span class="iconify" data-icon="lucide:users" data-width="16"
                                    style="color:var(--primary);"></span>
                                <span
                                    style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);">Inscritos</span>
                            </div>
                            <div class="font-heading" style="font-size:1.75rem;font-weight:700;color:white;">5k+</div>
                        </div>
                    </div>
                    <!-- Redes sociais -->
                    <div style="display:flex;gap:1rem;align-items:center;">
                        <a href="https://www.instagram.com/" target="_blank" class="cursor-hover glass-panel"
                            style="width:2.75rem;height:2.75rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white;text-decoration:none;transition:all .3s;">
                            <span class="iconify" data-icon="lucide:instagram" data-width="18"></span>
                        </a>
                        <a href="https://www.facebook.com/" target="_blank" class="cursor-hover glass-panel"
                            style="width:2.75rem;height:2.75rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white;text-decoration:none;transition:all .3s;">
                            <span class="iconify" data-icon="lucide:facebook" data-width="18"></span>
                        </a>
                        <a href="https://wa.me/qr/VXOYRY2DTQ6HG1" target="_blank" class="cursor-hover glass-panel"
                            style="width:2.75rem;height:2.75rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white;text-decoration:none;transition:all .3s;">
                            <span class="iconify" data-icon="lucide:message-circle" data-width="18"></span>
                        </a>
                    </div>
                </div>
                <!-- Right: Institutional Logos -->
                <div class="reveal" style="display:flex;flex-direction:column;gap:1rem;">
                    <p
                        style="font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.4);margin-bottom:.5rem;">
                        Instituições</p>
                    <div class="glass-panel glass-panel-hover cursor-hover"
                        style="padding:1.5rem;border-radius:1.25rem;display:flex;align-items:center;gap:1.25rem;">
                        <div
                            style="width:3rem;height:3rem;border-radius:.75rem;background:linear-gradient(135deg,#007bff,#0050cc);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 20px rgba(0,123,255,.25);">
                            <span class="iconify text-white" data-icon="lucide:hospital" data-width="20"></span>
                        </div>
                        <div>
                            <div class="font-heading"
                                style="font-weight:700;font-size:.9375rem;color:white;margin-bottom:.25rem;">Depto. de
                                Anestesiologia, Dor e Medicina Intensiva</div>
                            <div style="font-size:.75rem;color:rgba(255,255,255,.5);">Escola Paulista de Medicina ·
                                UNIFESP</div>
                        </div>
                    </div>
                    <div class="glass-panel glass-panel-hover cursor-hover"
                        style="padding:1.5rem;border-radius:1.25rem;display:flex;align-items:center;gap:1.25rem;">
                        <div
                            style="width:3rem;height:3rem;border-radius:.75rem;background:linear-gradient(135deg,rgba(41,197,246,.3),rgba(0,80,204,.3));display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(41,197,246,.2);">
                            <span class="iconify" data-icon="lucide:stethoscope" data-width="20"
                                style="color:#29C5F6;"></span>
                        </div>
                        <div>
                            <div class="font-heading"
                                style="font-weight:700;font-size:.9375rem;color:white;margin-bottom:.25rem;">Disciplina
                                de Anestesiologia e Dor</div>
                            <div style="font-size:.75rem;color:rgba(255,255,255,.5);">Escola Paulista de Medicina ·
                                UNIFESP</div>
                        </div>
                    </div>
                    <div class="glass-panel glass-panel-hover cursor-hover"
                        style="padding:1.5rem;border-radius:1.25rem;display:flex;align-items:center;gap:1.25rem;">
                        <div
                            style="width:3rem;height:3rem;border-radius:.75rem;background:linear-gradient(135deg,rgba(0,123,255,.2),transparent);border:1px solid rgba(0,123,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <span class="iconify" data-icon="lucide:building-2" data-width="20"
                                style="color:var(--primary);"></span>
                        </div>
                        <div>
                            <div class="font-heading"
                                style="font-weight:700;font-size:.9375rem;color:white;margin-bottom:.25rem;">DMI —
                                Disciplina de Medicina Intensiva</div>
                            <div style="font-size:.75rem;color:rgba(255,255,255,.5);">Escola Paulista de Medicina ·
                                UNIFESP</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ACESSO / LOGIN / REGISTRO -->
    <section id="acesso" style="padding:8rem 0;position:relative;z-index:10;">
        <div style="max-width:1280px;margin:0 auto;padding:0 1.5rem;">
            <div style="max-width:36rem;margin:0 auto;text-align:center;" class="reveal">
                <span class="glass-panel"
                    style="display:inline-block;padding:.25rem .75rem;border-radius:.25rem;font-size:.625rem;font-family:monospace;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.5);margin-bottom:2rem;">[
                    03. ACESSO ]</span>
                <h2 class="font-heading"
                    style="font-size:clamp(2rem,4vw,2.75rem);font-weight:600;letter-spacing:-.03em;margin-bottom:1rem;">
                    Acesse o Conteúdo</h2>
                <p style="color:rgba(255,255,255,.5);margin-bottom:3rem;">Faça login ou crie sua conta gratuita para
                    acessar todos os webinares.</p>
            </div>
            <!-- Tabs -->
            <div style="max-width:30rem;margin:0 auto;">
                <div class="glass-panel reveal"
                    style="display:flex;padding:.25rem;border-radius:.75rem;margin-bottom:2rem;">
                    <button id="tab-login" onclick="switchTab('login')"
                        style="flex:1;padding:.625rem;border-radius:.5rem;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:none;border:none;background:var(--primary);color:white;transition:all .3s;box-shadow:0 4px 15px rgba(0,123,255,.3);"
                        class="cursor-hover">
                        Login
                    </button>
                    <button id="tab-registro" onclick="switchTab('registro')"
                        style="flex:1;padding:.625rem;border-radius:.5rem;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:none;border:none;background:transparent;color:rgba(255,255,255,.5);transition:all .3s;"
                        class="cursor-hover">
                        Registro
                    </button>
                </div>
                <!-- Login Form -->
                <div id="content-login" class="glass-panel reveal" style="padding:2rem;border-radius:1.25rem;">
                    <form onsubmit="return false;">
                        <div class="input-group">
                            <input type="email" placeholder=" " id="email" autocomplete="email" />
                            <label for="email">E-mail</label>
                        </div>
                        <div class="input-group">
                            <input type="password" placeholder=" " id="senha" autocomplete="current-password" />
                            <label for="senha">Senha</label>
                        </div>
                        <button type="submit" class="cursor-hover"
                            style="width:100%;padding:.875rem;margin-top:.5rem;background:var(--primary);border:none;border-radius:.75rem;color:white;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:none;transition:all .3s;box-shadow:0 8px 30px rgba(0,123,255,.35);">
                            Entrar
                        </button>
                        <p style="text-align:center;font-size:.75rem;color:rgba(255,255,255,.4);margin-top:1.25rem;">
                            Não tem conta? <a href="#" onclick="switchTab('registro')"
                                style="color:var(--primary);text-decoration:none;" class="cursor-hover">Registre-se</a>
                        </p>
                    </form>
                </div>
                <!-- Registro Form -->
                <div id="content-registro" style="display:none;">
                    <div class="glass-panel reveal" style="padding:2rem;border-radius:1.25rem;">
                        <form onsubmit="return false;">
                            <div class="input-group">
                                <input type="text" placeholder=" " id="nome" />
                                <label for="nome">Nome completo</label>
                            </div>
                            <div class="input-group">
                                <input type="email" placeholder=" " id="email-reg" />
                                <label for="email-reg">E-mail</label>
                            </div>
                            <div class="input-group">
                                <input type="text" placeholder=" " id="crm" />
                                <label for="crm">CRM / Registro Profissional</label>
                            </div>
                            <div class="input-group">
                                <input type="password" placeholder=" " id="senha-reg" />
                                <label for="senha-reg">Senha</label>
                            </div>
                            <button type="submit" class="cursor-hover"
                                style="width:100%;padding:.875rem;margin-top:.5rem;background:var(--primary);border:none;border-radius:.75rem;color:white;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:none;transition:all .3s;box-shadow:0 8px 30px rgba(0,123,255,.35);">
                                Criar Conta Gratuita
                            </button>
                            <p
                                style="text-align:center;font-size:.75rem;color:rgba(255,255,255,.4);margin-top:1.25rem;">
                                Já tem conta? <a href="#" onclick="switchTab('login')"
                                    style="color:var(--primary);text-decoration:none;" class="cursor-hover">Fazer
                                    login</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer style="padding:3rem 0;border-top:1px solid rgba(255,255,255,.06);position:relative;z-index:10;">
        <div
            style="max-width:1280px;margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;">
            <div style="display:flex;align-items:center;gap:.75rem;">
                <div
                    style="width:1.75rem;height:1.75rem;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;">
                    <span class="iconify text-white" data-icon="lucide:microscope" data-width="12"></span>
                </div>
                <div>
                    <div class="font-heading" style="font-size:.875rem;font-weight:700;color:white;">Reunião Científica
                    </div>
                    <div style="font-size:.625rem;color:rgba(255,255,255,.4);">DADMI · EPM · UNIFESP</div>
                </div>
            </div>
            <div style="display:flex;gap:2rem;flex-wrap:wrap;">
                <a href="#hero"
                    style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);text-decoration:none;transition:color .3s;"
                    class="cursor-hover">Home</a>
                <a href="#webinares"
                    style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);text-decoration:none;transition:color .3s;"
                    class="cursor-hover">Webinares</a>
                <a href="#sobre"
                    style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);text-decoration:none;transition:color .3s;"
                    class="cursor-hover">Sobre</a>
                <a href="#acesso"
                    style="font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);text-decoration:none;transition:color .3s;"
                    class="cursor-hover">Acesso</a>
            </div>
            <p style="font-size:.625rem;color:rgba(255,255,255,.25);text-align:right;">© 2025
                reuniaocientifica.dadmi.com.br</p>
        </div>
    </footer>

    <style>
        @media (min-width: 768px) {
            #nav-links {
                display: flex !important;
                gap: 2rem;
            }

            #login-link {
                display: inline !important;
            }

            #hero-label {
                display: block !important;
            }

            #sobre-grid {
                grid-template-columns: 1fr 1fr !important;
            }
        }

        @media (min-width: 1024px) {
            #hero-label {
                display: block !important;
            }
        }

        .card-arrow {
            transition: opacity 0.4s;
        }

        .glass-panel:hover .card-arrow {
            opacity: 1 !important;
        }

        .nav-link:hover {
            color: white !important;
        }

        a[href="#acesso"]:hover {
            opacity: .85;
        }
    </style>

    <script>
        // Preloader
        const progress = document.getElementById('loader-progress');
        const loaderText = document.getElementById('loader-text');
        const texts = ['Carregando conteúdo', 'Conectando ao servidor', 'Pronto'];
        let pct = 0;
        const interval = setInterval(() => {
            pct += Math.random() * 18 + 5;
            if (pct >= 100) { pct = 100; clearInterval(interval); }
            progress.style.width = pct + '%';
            if (pct > 33) loaderText.textContent = texts[1];
            if (pct > 66) loaderText.textContent = texts[2];
        }, 200);

        window.addEventListener('load', () => {
            setTimeout(() => {
                document.getElementById('preloader').classList.add('loaded');
                setTimeout(() => {
                    document.getElementById('preloader').style.display = 'none';
                    document.querySelector('#hero').classList.add('hero-revealed');
                }, 900);
            }, 600);
        });

        // Custom Cursor
        const cursor = document.getElementById('cursor');
        document.addEventListener('mousemove', e => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });
        document.querySelectorAll('.cursor-hover').forEach(el => {
            el.addEventListener('mouseenter', () => cursor.classList.add('hovered'));
            el.addEventListener('mouseleave', () => cursor.classList.remove('hovered'));
        });

        // Reveal on scroll
        function revealOnScroll() {
            document.querySelectorAll('.reveal').forEach(el => {
                if (el.getBoundingClientRect().top < window.innerHeight - 100)
                    el.classList.add('active');
            });
        }
        window.addEventListener('scroll', revealOnScroll, { passive: true });
        revealOnScroll();

        // Tab switching
        function switchTab(tab) {
            const loginBtn = document.getElementById('tab-login');
            const registroBtn = document.getElementById('tab-registro');
            const loginContent = document.getElementById('content-login');
            const registroContent = document.getElementById('content-registro');

            if (tab === 'login') {
                loginBtn.style.background = 'var(--primary)';
                loginBtn.style.color = 'white';
                loginBtn.style.boxShadow = '0 4px 15px rgba(0,123,255,.3)';
                registroBtn.style.background = 'transparent';
                registroBtn.style.color = 'rgba(255,255,255,.5)';
                registroBtn.style.boxShadow = 'none';
                loginContent.style.display = 'block';
                registroContent.style.display = 'none';
            } else {
                registroBtn.style.background = 'var(--primary)';
                registroBtn.style.color = 'white';
                registroBtn.style.boxShadow = '0 4px 15px rgba(0,123,255,.3)';
                loginBtnl.getAttribute('data-parallax-speed')) || 0.1;
                const rect = el.parentElement/* End custom CSS */