Showing source for: https://www.gorgonoid.com/
Duration: 0.786582s
Server: cloudflare

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gorgonoid - Transformando conhecimento em resultados</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" href="https://gorgonoid.com/consultoria/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="https://gorgonoid.com/consultoria/favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://www.youtube.com">
    <link rel="preconnect" href="https://i.ytimg.com">

    <style>
        /* Variáveis de cores e fontes */
        :root {
            --color-black: #000000;
            --color-dark: #121212;
            --color-red: #d32f2f;
            --color-red-dark: #b71c1c;
            --color-white: #ffffff;
            --color-gray: #f5f5f5;
            --transition: all 0.3s ease;
        }

        /* Reset e estilos gerais */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
           font-family: 'Century Gothic', 'Segoe UI', 'Inter', sans-serif;
            background-color: var(--color-black);
            color: var(--color-white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: var(--color-white);
            transition: var(--transition);
        }

        a:hover {
            color: var(--color-red);
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .btn {
            display: inline-block;
            padding: 12px 28px;
            background: var(--color-red);
            color: var(--color-white);
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            border: 2px solid var(--color-red);
        }

        .btn:hover {
            background: transparent;
            color: var(--color-red);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--color-white);
        }

        .btn-outline:hover {
            background: var(--color-white);
            color: var(--color-black);
        }

        section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .section-title h2 {
            font-size: 2.5rem;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .section-title h2 span {
            color: var(--color-red);
        }

        .section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--color-red);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            padding: 20px 0;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: inline-block;
            background: var(--color-black);
            padding: 10px;
        }

        .logo img {
            max-width: 150px;
            height: auto;
        }

        .logo span {
            color: var(--color-red);
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 30px;
        }

        nav ul li a {
            font-weight: 500;
            position: relative;
            padding-bottom: 5px;
        }

        nav ul li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--color-red);
            transition: var(--transition);
        }

        nav ul li a:hover::after {
            width: 100%;
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--color-white);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
                url('imgs/gorgonoid3.jpg') no-repeat center center/cover;
            position: relative;
            overflow: hidden;
            text-align: center;
            min-height: 100vh;
            /* Full viewport height */
            display: flex;
            /* Center content vertically */
            align-items: center;
            /* Center content vertically */
            padding: 20px;
            /* Prevent content from touching edges */
        }

        .hero-content {
            display: flex;
            /* Restore side-by-side layout */
            align-items: center;
            /* Vertically align text and image */
            justify-content: center;
            /* Horizontally center */
            max-width: 1200px;
            /* Wider to accommodate text and image */
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .hero-text {
            flex: 1;
            /* Take available space */
            padding: 0 20px;
            /* Add padding for spacing */
            max-width: 600px;
            /* Limit text width */
        }

        .hero-text h1 {
            font-size: 2.8rem;
            line-height: 1.3;
            margin-bottom: 15px;
            text-transform: uppercase;
            font-style: italic;
            letter-spacing: 1.5px;
            color: #fff;
        }

        .hero-text h1 span {
            background: linear-gradient(to bottom, #FFD700, #FF8C00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-text p {
            font-size: 1.1rem;
            margin-bottom: 25px;
            opacity: 0.85;
            color: #ddd;
        }

        .hero-links {
            display: flex;
            gap: 12px;
            justify-content: center;
            /* Center buttons */
        }

        .hero-image {
            flex: 1;
            /* Take available space */
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 500px;
            /* Constrain image width */
        }

        .hero-image img {
            max-width: 100%;
            max-height: 500px;
            /* Limit height */
            object-fit: cover;
            /* Proper scaling */
            border-radius: 8px;
            /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);*/
            border: 0px solid var(--color-red);
        }
        /* Parallax do background do .hero (move só a imagem, não o gradiente) */
        .hero{
          /* duas camadas → 1) gradiente  2) imagem */
          background-size: auto, cover;
          background-position: center center, center calc(50% + var(--bg-shift, 0px));
        }
        
        /* (opcional) desativa um possível 'fixed' em mobile, se você usar */
        @media (max-width:1024px){
          .hero{background-attachment: scroll; }
        }
.hero-text,
.hero-image {
  will-change: transform;
  transition: transform 0.15s ease-out;
}


        /* Seção Antes e Depois */
        .before-after {
            background: var(--preto);
            text-align: center;
        }

        .transformations-container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            padding: 0 50px;
        }

        .transformations-slider {
            display: flex;
            transition: transform 0.5s ease;
        }

        .transformation-item {
            min-width: calc(25% - 30px);
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s ease;
        }

        .transformation-image {
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
            aspect-ratio: 1/1.5;
        }

        .transformation-image:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(229, 9, 20, 0.3);
        }

        .transformation-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--cinza);
            margin: 0 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider-dot.active {
            background: var(--vermelho);
            transform: scale(1.3);
        }

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(229, 9, 20, 0.7);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .slider-arrow:hover {
            background: var(--vermelho);
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }

        /* Animações */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

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

            50% {
                transform: scale(1.1);
            }

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

        /* Responsive Design */
        @media (max-width: 1200px) {
            .transformation-item {
                min-width: calc(33.33% - 30px);
            }
        }

        @media (max-width: 992px) {
            .transformation-item {
                min-width: calc(50% - 30px);
            }

        }

        @media (max-width: 768px) {
            .hero-content {
                flex-direction: column;
                /* Stack vertically on mobile */
                text-align: center;
            }

            .hero-text {
                padding: 0;
                margin-bottom: 20px;
                max-width: 100%;
                /* Full width on mobile */
            }

            .hero-text h1 {
                font-size: 2rem;
            }

            .transformation-item {
                min-width: calc(100% - 30px);
            }

            .hero-text p {
                font-size: 1rem;
            }

            .slider-arrow {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }

            .close {
                top: 20px;
                right: 20px;
                font-size: 30px;
                width: 50px;
                height: 50px;
                padding: 5px;
            }

            .hero-image {
                max-width: 100%;
                /* Full width on mobile */
            }

            .hero-image img {
                max-height: 300px;
                /* Smaller image on mobile */
            }
        }

        @media (max-width: 480px) {
            .hero {
                padding: 15px;
            }

            .hero-text h1 {
                font-size: 1.8rem;
            }

            .hero-links {
                flex-direction: column;
                /* Stack buttons */
                gap: 10px;
            }
        }

        /* Video Section */
        .video-section {
            background: var(--color-dark);
        }

        .video-container {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .main-video {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            border: 2px solid var(--color-red);
        }

        .main-video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .video-carousel {
            position: relative;
        }

        .carousel-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            padding: 10px 0 30px;
            scrollbar-width: thin;
            scrollbar-color: var(--color-red) transparent;
            
            
        }

        .carousel-container::-webkit-scrollbar {
            height: 8px;
        }

        .carousel-container::-webkit-scrollbar-thumb {
            background: var(--color-red);
            border-radius: 4px;
        }

        .video-thumb {
            scroll-snap-align: start;
            min-width: 250px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .video-thumb:hover {
            transform: translateY(-5px);
            border-color: var(--color-red);
        }

        .video-thumb img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            display: block;
        }

        .video-thumb .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(211, 47, 47, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }

        .video-thumb:hover .overlay {
            opacity: 1;
        }

        .video-thumb h3 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.8);
            padding: 10px;
            font-size: 0.9rem;
            margin: 0;
        }

        .video-cta {
            text-align: center;
            margin-top: 30px;
        }/* Sponsors Section */.sponsors-section {
            background: var(--color-black);
        }

    /* === Sponsors grid centralizada (3 por linha) === */
        .sponsors-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 57px;
          justify-content: center; /* centraliza a linha incompleta */
        }
        
        /* 3 colunas fixas no desktop */
        .sponsor-card {
          flex: 0 0 calc((100% - (3 - 1) * 57px) / 3);
          max-width: calc((100% - (3 - 1) * 57px) / 3);
        }
        
        /* 2 colunas no tablet */
        @media (max-width: 1024px) {
          .sponsor-card {
            flex: 0 0 calc((100% - (2 - 1) * 57px) / 2);
            max-width: calc((100% - (2 - 1) * 57px) / 2);
          }
        }
        
        /* 1 coluna no mobile */
        @media (max-width: 640px) {
          .sponsor-card {
            flex: 0 0 100%;
            max-width: 100%;
          }
        }


        .sponsor-card {
            background: var(--color-dark);
            border-radius: 10px;
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .sponsor-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(211, 47, 47, 0.2);
            border-color: var(--color-red);
        }

        .sponsor-header {
            padding: 20px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sponsor-logo {
            max-width: 150px;
            height: 80px;
            object-fit: contain;
            margin: 0 auto;
            display: block;
            
            padding: 10px;
            border-radius: 8px;
        }

        .sponsor-content {
            padding: 20px;
            flex-grow: 1;
        }

        .sponsor-content h3 {
            color: var(--color-red);
            margin-bottom: 10px;
        }

        .sponsor-coupon {
            background: rgba(211, 47, 47, 0.1);
            padding: 10px;
            border-radius: 4px;
            margin: 15px 0;
            text-align: center;
            border: 1px dashed var(--color-red);
        }

        .sponsor-coupon span {
            font-weight: bold;
            color: var(--color-red);
        }

        .sponsor-link {
            display: block;
            text-align: center;
            background: var(--color-red);
            color: var(--color-white);
            padding: 10px;
            font-weight: 600;
            border-radius: 4px;
            margin-top: 15px;
            transition: var(--transition);
        }

        .sponsor-link:hover {
            background: var(--color-red-dark);
            color: white;
        }
        .sponsor-full-link {
            position: absolute;
            inset: 0; /* cobre todo o card */
            z-index: 1;
        }
        
                /* App Section */
        .app-section {
            background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-black) 100%);
            position: relative;
            overflow: hidden;
        }

        .app-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(211, 47, 47, 0.05) 0%, transparent 70%);
            z-index: 0;
        }

        .app-container {
            display: flex;
            align-items: center;
            gap: 50px;
            position: relative;
            z-index: 1;
        }

        .app-image {
            flex: 1;
            position: relative;
        }

        .phone-mockup {
            position: relative;
            width: 300px;
            height: 600px;
            margin: 0 auto;
            background: url('https://gorgonoid.com/consultoria/g8.png') no-repeat center center/cover;
            border-radius: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
            border: 10px solid var(--color-black);
            overflow: hidden;
            animation: changeAppScreen 12s infinite;
        }

        @keyframes changeAppScreen {

            0%,
            100% {
                background-image: url('https://gorgonoid.com/consultoria/g8.png');
            }

            25% {
                background-image: url('https://gorgonoid.com/consultoria/g9.png');
            }

            75% {
                background-image: url('https://gorgonoid.com/consultoria/g8.png');
            }
        }

        .app-content {
            flex: 1;
        }

        .app-content h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .app-content h2 span {
            color: var(--color-red);
        }

        .app-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 30px 0;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-icon {
            color: var(--color-red);
            font-size: 1.5rem;
        }

        .app-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .app-buttons a {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--color-dark);
            padding: 12px 25px;
            border-radius: 8px;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .app-buttons a:hover {
            background: var(--color-red);
            transform: translateY(-3px);
            color: white;
        }

        /* Calculators Section */
        .calculators-section {
            background: var(--color-dark);
        }

        .calculators-grid {
            display: flex;
            flex-wrap: wrap;
            /* Permite que os itens quebrem para a próxima linha */
            justify-content: center;
            /* Centraliza os itens na linha, incluindo a última */
            gap: 30px;
        }

        /* Você também precisará definir um tamanho base para os itens */
        .calculators-grid>div {
            /* Supondo que seus itens são divs */
            flex-basis: 300px;
            /* Equivalente ao minmax(300px, ...) */
            flex-grow: 1fr;
            /* Permite que os itens cresçam e ocupem o espaço, como o '1fr' */
        }

        .calculator-card {
            background: var(--color-black);
            border-radius: 10px;
            padding: 30px;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;   /* NOVO: base pro link invisível */
        }

        .calculator-card:hover {
            transform: translateY(-10px);
            border-color: var(--color-red);
            box-shadow: 0 10px 30px rgba(211, 47, 47, 0.2);
        }

        .calculator-icon {
            font-size: 2.5rem;
            color: var(--color-red);
            margin-bottom: 20px;
            text-align: center;
        }

        .calculator-card h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        .calculator-card p {
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .calculator-full-link {
          position: absolute;
          inset: 0;             /* cobre todo o retângulo */
          z-index: 1;
          border-radius: inherit;
        }
        .calculator-card .btn {
          display: none;
        }
        
        /* Consultation Section */
        .consultation-section {
            background: linear-gradient(to bottom, var(--color-black) 0%, var(--color-dark) 100%);position: relative;}

        .consultation-title {
            text-align: center;
            margin-bottom: 40px;
        }

        .consultation-title h2 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .consultation-title h2 span {
            color: var(--color-red);
        }

        .consultation-title p {
            max-width: 600px;
            margin: 0 auto;
        }

        .before-after-carousel {
            position: relative;
            margin-bottom: 50px;
        }

        .carousel-wrapper {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            padding: 10px 0 30px;
            scrollbar-width: thin;
            scrollbar-color: var(--color-red) transparent;
        }

        .carousel-wrapper::-webkit-scrollbar {
            height: 8px;
        }

        .carousel-wrapper::-webkit-scrollbar-thumb {
            background: var(--color-red);
            border-radius: 4px;
        }

        .result-card {
            scroll-snap-align: start;
            min-width: 300px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            position: relative;
        }

        .result-card img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            display: block;
        }

        .result-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
        }

        .result-overlay h3 {
            color: var(--color-red);
            margin-bottom: 5px;
        }

        .cta-button {
            text-align: center;
            margin: 30px 0;
        }

        .about-gorgo {
            display: flex;
            align-items: center;
            gap: 50px;
            margin-top: 80px;
        }

        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .about-content {
            flex: 1;
        }

        .about-content h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .about-content h2 span {
            color: var(--color-red);
        }

        .about-content p {
            margin-bottom: 15px;
        }

        /* Footer */
        footer {
            background: black;
            padding: 60px 0 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-logo {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .footer-logo span {
            color: var(--color-red);
        }

        .footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: var(--transition);
        }

        .social-icon:hover {
            background: var(--color-red);
            transform: translateY(-5px);
            color: white;
        }

        .footer-links h3 {
            color: var(--color-red);
            margin-bottom: 20px;
            font-size: 1.2rem;
        }

        .footer-links ul {
            list-style: none;
        }

        .footer-links ul li {
            margin-bottom: 10px;
        }

        .footer-links ul li a {
            display: block;
            transition: var(--transition);
            padding: 5px 0;
        }

        .footer-links ul li a:hover {
            padding-left: 5px;
            color: var(--color-red);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* Responsividade */
        @media (max-width: 992px) {
            .hero-content {
                flex-direction: column;
            }

            .hero-text {
                padding-right: 0;
                margin-bottom: 40px;
                text-align: center;
            }

            .hero-links {
                justify-content: center;
            }

            .app-container {
                flex-direction: column;
            }

            .about-gorgo {
                flex-direction: column;
            }
        }

        @media (max-width: 1200px) {
            .mobile-menu-btn {
                display: block;
                z-index: 1001;
                /* Garante que o botão fique acima do menu */
            }

            nav ul {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--color-dark);
                flex-direction: column;
                align-items: center;
                padding-top: 40px;
                transition: left 0.3s ease;
                /* Transição apenas no left */
            }

            nav ul.active {
                left: 0;
            }

            nav ul li {
                margin: 15px 0;
            }

            .dropdown-menu {
                position: static;
                box-shadow: none;
                background: rgba(255, 255, 255, 0.05);
                margin: 10px 0;
                width: 100%;
                display: none;
                /* Inicialmente escondido */
            }

            .dropdown.active .dropdown-menu {
                display: block;
            }

            .hero-text h1 {
                font-size: 2.5rem;
            }

            .app-buttons {
                flex-direction: column;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .app-features {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .hero {
                padding-top: 130px;
                padding-bottom: 60px;
            }

            section {
                padding: 60px 0;
            }

            .btn {
                padding: 10px 20px;
                font-size: 0.9rem;}

            .hero-links {
                flex-direction: column;
            }
        }

        .dropdown {
            position: relative;
            cursor: pointer;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--color-dark);
            list-style: none;
            min-width: 200px;
            border-radius: 4px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .dropdown:hover .dropdown-menu {
            display: block;
            opacity: 1;
            visibility: visible;
        }

        .dropdown-menu li {
            margin: 0;
        }

        .dropdown-menu li a {
            display: block;
            padding: 10px 15px;
            font-weight: 400;
            color: var(--color-white);
        }

        .dropdown-menu li a:hover {
            background: var(--color-red);
            color: var(--color-white);
        }

        .dropdown>a i {
            margin-left: 5px;
            font-size: 0.8rem;
        }

        .gorgoteam-text p{font-size:1.1rem;
            line-height: 1.6;
        }

        .gorgoteam-text h2 {
            font-size: 1.8rem;
            line-height: 1.3;
        }

        .consultation-intro {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1.8fr;
            gap: 40px;
            align-items: center;
            margin-bottom: 60px;
            padding: 50px 40px;
            background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .consultation-intro::before {
            height: 2px;
            background: var(--color-red);
            opacity: 0.5;
        }

        .consultation-intro::after {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 0, 0, 0.05) 0%, transparent 70%);
        }

        .gorgonoid-photo {
            position: relative;
            z-index: 2;
        }

        .gorgonoid-photo img {
            width: 100%;
            height: auto;
            border-radius: 16px;
            border: 4px solid transparent;
            background: linear-gradient(var(--color-red), #cc0000) border-box;
            box-shadow:
                0 15px 30px rgba(0, 0, 0, 0.4),
                0 0 0 4px var(--color-red);
            transition: all 0.3s ease;
            transform: perspective(800px) rotateY(-3deg);
        }

        .gorgonoid-photo img:hover {
            transform: perspective(800px) rotateY(0deg) scale(1.02);
            box-shadow:
                0 20px 40px rgba(0, 0, 0, 0.5),
                0 0 0 4px var(--color-red),
                0 0 30px rgba(255, 0, 0, 0.3);
        }

        .gorgoteam-text {
            position: relative;
            z-index: 2;
        }

        .gorgoteam-text p {
            font-size: 1.2rem;
            margin-bottom: 18px;
            line-height: 1.7;
            opacity: 0.95;
        }

        .gorgoteam-text p:first-child {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .gorgoteam-text p:nth-child(2) {
            font-weight: 700;
            font-size: 1.4rem;
            color: #ffffff;
            background: linear-gradient(135deg, var(--color-red), #ff3333);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 25px;
            line-height: 1.3;
        }

        .gorgoteam-text p:last-child {
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 30px;
        }

        .gorgoteam-text img {
            max-width: 180px;
            height: auto;
            filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
            transition: all 0.3s ease;
        }

        .gorgoteam-text img:hover {
            transform: scale(1.05) translateY(-2px);
            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
        }

        /* Responsivo */
        @media (max-width: 968px) {
            .consultation-intro {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 40px 30px;
                text-align: center;
            }

            .gorgonoid-photo {
                max-width: 400px;
                margin: 0 auto;
            }

            .gorgonoid-photo img {
                transform: none;
            }

            .gorgoteam-text p:nth-child(2)::after {
                display: block;
                margin: 15px auto 0;
                width: fit-content;
            }
        }

        @media (max-width: 640px) {
            .consultation-intro {
                padding: 30px 20px;
                margin-bottom: 40px;
            }

            .gorgoteam-text p {
                font-size: 1.1rem;
            }

            .gorgoteam-text p:nth-child(2) {
                font-size: 1.2rem;
            }

            .gorgoteam-text img {
                max-width: 150px;
            }

            .gorgoteam-text p:nth-child(2)::after {
                font-size: 0.6rem;
                padding: 6px 12px;
            }
        }

        .consultation-section {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            padding: 80px 0;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .consultation-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, rgba(255, 69, 0, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .consultation-section .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 2;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-header h2 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(45deg, #ff4500, #ff6b35);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .section-subtitle {
            font-size: 1.4rem;
            color: #ccc;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .consultation-content {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 60px;
            align-items: center;
            margin-bottom: 80px;
        }

        .gorgonoid-photo {
            position: relative;
        }

        .gorgonoid-photo img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
            border: 3px solid #ff4500;
        }

        .content-text {
            padding: 20px 0;
        }

        .content-text h3 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 25px;
            line-height: 1.3;
        }

        .content-text p {
            font-size: 1.1rem;
            color: #bbb;line-height: 1.7;
            margin-bottom: 20px;
        }

        .highlight-text {
            color: #ff4500;
            font-weight: 600;
        }

        .gorgoteam-logo {
            margin-top: 30px;
            text-align: center;
        }

        .gorgoteam-logo img {
            height: 120px;
            filter: brightness(1.2);
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .consultation-section {
                padding: 60px 0;
            }

            .section-header h2 {
                font-size: 2.5rem;
            }

            .section-subtitle {
                font-size: 1.2rem;
            }

            .consultation-content {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .gorgonoid-photo img {
                height: 300px;
                max-width: 100%;
            }

            .content-text h3 {
                font-size: 1.8rem;
            }

            .gorgoteam-logo img {
                height: 80px;
                max-width: 100%;
            }
        }
    </style>
</head>

<body>
    <!-- Header -->
    <link rel="stylesheet" href="https://gorgonoid.com/css/fonte-global.css?v=1">
<link rel="stylesheet" href="https://gorgonoid.com/header-footer.css?v=7">

<style>
body { padding-top: 75px; }

body header {
  --color-black: transparent;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
}

@keyframes subtle-pulse-scale {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: .95; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fire-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.attention-link a {
  animation: subtle-pulse-scale 2s infinite ease-in-out, fire-gradient 3s infinite ease-in-out;
  display: inline-block;
  transition: all .3s ease;
  background: linear-gradient(45deg,#ff0000,#ff4500,#ff8c00,#ffa500,#ffff00);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  filter: drop-shadow(0 0 8px rgba(255,69,0,.4));
}

.attention-link a:hover {
  animation: none;
  transform: scale(1.05);
  opacity: 1;
  filter: drop-shadow(0 0 15px rgba(255,69,0,.8));
  -webkit-text-fill-color: #fff;
}

@media (max-width:1260px) {
  .header-container { padding-right: 80px; }
  .mobile-menu-btn { position:absolute !important; right:50px !important; top:30px !important; z-index:1003 !important; }
  #navMenu {
    display:none;
    flex-direction:column;
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100vh !important;
    background:rgba(0,0,0,.85) !important;
    z-index:1001 !important;
    overflow-y:auto !important;
    padding:80px 0 20px !important;
    box-sizing:border-box;
  }
  #navMenu.open { display:flex; }
  .dropdown .dropdown-menu {
    display:none !important;
    position:static !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    margin:6px 0 10px 20px !important;
    padding:0 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    box-shadow:none !important;
    background:rgba(0,0,0,.85) !important;
    list-style:none !important;
  }
  .dropdown.open .dropdown-menu { display:block !important; }
  .dropdown .dropdown-menu li { margin:0 !important; padding:0 !important; }
  .dropdown .dropdown-menu li a { display:block !important; padding:10px 16px !important; line-height:1.2 !important; }
  .dropdown-toggle:focus,.dropdown-toggle:active { outline:none !important; -webkit-tap-highlight-color:transparent !important; }
  .mobile-menu-btn.menu-open i:before { content:"\f00d" !important; font-family:"Font Awesome 5 Free" !important; font-weight:900 !important; }
  .attention-link a {
    animation:subtle-pulse-scale 2s infinite ease-in-out,fire-gradient 4s infinite ease-in-out;
    padding:10px 16px !important;
    display:block !important;
    background:linear-gradient(45deg,#ff0000,#ff4500,#ff8c00);
    background-size:200% 200%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 6px rgba(255,69,0,.5));
  }
  .attention-link a:hover { animation:none; transform:none; filter:drop-shadow(0 0 10px rgba(255,69,0,.7)); }
}

@media (min-width:1261px) { .dropdown:hover .dropdown-menu { display:block; } }
</style>

<header>
  <div class="container header-container">
    <a href="https://gorgonoid.com" class="logo"><img src="https://gorgonoid.com/imgs/gorgonoidlogo.png" alt="Gorgonoid Logo"></a>
    <button class="mobile-menu-btn" id="mobileMenuBtn"><i class="fas fa-bars"></i></button>
    <nav>
      <ul id="navMenu">
        <li><a href="https://gorgonoid.com/links">Links</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle">📊Rankings <i class="fas fa-chevron-down"></i></a>
          <ul class="dropdown-menu">
            <li><a href="https://gorgonoid.com/canais">🏆 Canais</a></li>
            <li><a href="https://gorgonoid.com/olympia">👑 Mr. Olympia</a></li>
            <li><a href="https://gorgonoid.com/qi">🧠 Teste de Q.I</a></li>
          </ul>
        </li>
        <li><a href="https://gorgonoid.com/index.php#videos">Vídeos</a></li>
        <li><a href="https://app.gorgonoid.com">gorGOapp</a></li>
        <li class="dropdown">
          <a href="https://gorgonoid.com/#calculators" class="dropdown-toggle">Calculadoras <i class="fas fa-chevron-down"></i></a>
          <ul class="dropdown-menu">
            <li><a href="https://gorgonoid.com/dietarapida.php">Dieta Flexível Fácil</a></li>
            <li><a href="https://gorgonoid.com/dietaavancada.php">Dieta Avançada</a></li>
            <li><a href="https://gorgonoid.com/alimentos.php">Substituição de Alimentos</a></li>
            <li><a href="https://gorgonoid.com/whey.php">Custo-benefício Whey</a></li>
            <li><a href="https://gorgonoid.com/ciclo.php">Ciclo de Carboidratos</a></li>
            <li><a href="https://gorgonoid.com/tmb.php">Taxa Metabólica Basal</a></li>
            <li><a href="https://gorgonoid.com/bf.php">% de Gordura Corporal</a></li>
            <li><a href="https://gorgonoid.com/potencial.php">Potencial Genético</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="https://gorgonoid.com/#gyms" class="dropdown-toggle">Academias <i class="fas fa-chevron-down"></i></a>
          <ul class="dropdown-menu">
            <li><a href="https://gorgonoid.com/go.php"><b>Conheça a rede GO</b></a></li>
            <li><a href="https://gorgonoid.com/go_timirim.php">GO - Timirim</a></li>
            <li><a href="https://gorgonoid.com/go_centro_sul.php">GO - Centro Sul</a></li>
            <li><a href="https://gorgonoid.com/go_limoeiro.php">GO - Limoeiro</a></li>
            <li><a href="https://gorgonoid.com/golilheus">GO - Ilhéus</a></li>
            <li><a href="https://gorgonoid.com/gomaceio.php">GO - Maceio</a></li>
            <li><a href="https://gorgonoid.com/go_ipatinga.php">GO - Ipatinga</a></li>
            <li><a href="https://gorgonoid.com/ubox.php">UBOX GO - Ipatinga</a></li>
          </ul>
        </li>
        <li class="attention-link"><a href="https://gorgonoid.com/consultoria">🔥Consultoria</a></li>
        <li class="attention-link"><a href="https://gorgonoid.com/pro"><b>🤖gorGOpro</b></a></li>
      </ul>
    </nav>
  </div>
</header>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const mobileBtn = document.getElementById("mobileMenuBtn");
  const navMenu = document.getElementById("navMenu");
  const openedOnce = new WeakMap();
  if (!mobileBtn || !navMenu) return;

  function closeAllSubmenus() {
    document.querySelectorAll(".dropdown").forEach(li => li.classList.remove("open"));
    document.querySelectorAll(".dropdown-toggle").forEach(a => openedOnce.set(a, false));
  }

  function toggleMainMenu(open) {
    if (open) {
      navMenu.classList.add("open");
      document.body.style.overflow = "hidden";
      mobileBtn.classList.add("menu-open");
    } else {
      navMenu.classList.remove("open");
      document.body.style.overflow = "";
      mobileBtn.classList.remove("menu-open");
      closeAllSubmenus();
    }
  }

  mobileBtn.addEventListener("click", e => {
    e.stopPropagation();
    toggleMainMenu(!navMenu.classList.contains("open"));
  });

  function bindMobileDropdowns() {
    if (window.innerWidth > 1260) return;
    document.querySelectorAll(".dropdown-toggle").forEach(toggleLink => {
      if (toggleLink.dataset.bound === "1") return;
      toggleLink.dataset.bound = "1";
      openedOnce.set(toggleLink, false);
      toggleLink.addEventListener("click", function(e) {
        if (window.innerWidth > 1260) return;
        e.stopPropagation();
        const parentLi = this.parentElement;
        const hasOpen = parentLi.classList.contains("open");
        const wasOpenedOnce = openedOnce.get(this);
        if (!hasOpen) {
          e.preventDefault();
          document.querySelectorAll(".dropdown").forEach(li => { if (li !== parentLi) li.classList.remove("open"); });
          parentLi.classList.add("open");
          openedOnce.set(this, true);
        } else if (wasOpenedOnce && this.href) {
          toggleMainMenu(false);
          setTimeout(() => { window.location.href = this.href; }, 120);
          openedOnce.set(this, false);
        }
      });
    });
  }

  bindMobileDropdowns();

  document.addEventListener("click", function(e) {
    if (window.innerWidth <= 1260) {
      const isClickInsideMenu = navMenu.contains(e.target);
      const isClickInsideDropdown = e.target.closest(".dropdown");
      const isClickMobileBtn = mobileBtn.contains(e.target);
      if (!isClickInsideMenu && !isClickMobileBtn) toggleMainMenu(false);
      else if (isClickInsideMenu && !isClickInsideDropdown) closeAllSubmenus();
    }
  });

  window.addEventListener("resize", () => {
    if (window.innerWidth > 1260) {
      document.body.style.overflow = "";
      navMenu.classList.remove("open");
      closeAllSubmenus();
      mobileBtn.classList.remove("menu-open");
    }
  });
});
</script>
<script>
(function(){
    'use strict';

    try {
        var p = location.pathname || '/';

        // Nunca rastrear áreas técnicas/administrativas.
        if (
            p.indexOf('/admin') === 0 ||
            p.indexOf('/analytics') === 0 ||
            p.indexOf('/api') === 0
        ) return;

        function uid(storage, key) {
            var v = null;
            try { v = storage.getItem(key); } catch(e) {}
            if (v) return v;

            if (window.crypto && typeof crypto.randomUUID === 'function') {
                v = crypto.randomUUID();
            } else {
                v = Date.now().toString(36) + Math.random().toString(36).slice(2) +
                    Math.random().toString(36).slice(2);
            }

            try { storage.setItem(key, v); } catch(e) {}
            return v;
        }

        var visitor = uid(localStorage, 'gorgo_visitor_id');
        var session = uid(sessionStorage, 'gorgo_session_id');
        var qs = new URLSearchParams(location.search);

        var payload = {
            visitor_id: visitor,
            session_id: session,
            path: p,
            title: document.title || '',
            referrer: document.referrer || '',
            utm_source: qs.get('utm_source') || '',
            utm_medium: qs.get('utm_medium') || '',
            utm_campaign: qs.get('utm_campaign') || '',
            utm_content: qs.get('utm_content') || '',
            utm_term: qs.get('utm_term') || '',
            screen_width: window.screen && screen.width ? screen.width : 0
        };

        var body = JSON.stringify(payload);

        if (navigator.sendBeacon) {
            navigator.sendBeacon(
                '/analytics/track.php',
                new Blob([body], {type:'application/json'})
            );
        } else {
            fetch('/analytics/track.php', {
                method:'POST',
                headers:{'Content-Type':'application/json'},
                body:body,
                credentials:'same-origin',
                keepalive:true
            }).catch(function(){});
        }
    } catch(e) {}
})();
</script>

    <!-- Hero Section -->
    <section class="hero" id="home">
    <div class="container hero-content">
        <div class="hero-text">
            <h1 style="letter-spacing: -1px;font-size: 4rem;line-height: 0.9;">
                CONTEÚDO <br>
                <span>SEM LERO-LERO&nbsp</span> <br>
                E SEM MIMIMI
            </h1><p></p><div class="hero-links">
                <a href="#videos" class="btn">Ver Vídeos</a>
                <a href="https://www.gorgonoid.com/links"
                   class="btn btn-outline">links importantes</a>
            </div>
            <br></br>
           <i> "A boca mente, o shape não." - 2021, Gorgonoid</i>
        </div>
        <div class="hero-image">
            <img src="imgs/gorgonoid6.png" alt="Gorgonoid">
        </div>
    </div>
</section>


<section style="margin: 0; padding: 0; width: 100%;z-index:999;">
    
<style>
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    * {
        box-sizing: border-box;
    }

    /* CSS inline para o carrossel - slim, full width, max 90px altura, tema dark */
    .carousel1-container {
    position: relative;
    width: 100vw;
    height: 90px;
    overflow: hidden;
    background-color: rgba(26, 26, 26, 0.5); /* Fundo semi-transparente (70% de opacidade) */
    backdrop-filter: blur(5px); /* Aplica desfoque ao fundo */
    -webkit-backdrop-filter: blur(5px); /* Para compatibilidade com navegadores WebKit */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .carousel1-slides {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease-in-out;
        position: relative;
        z-index: 5;
    }

    .slide {
        min-width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Centraliza horizontalmente */
        padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        z-index: 6;
    }

    .slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    .slide-link {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Centraliza o conteúdo */
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
        position: relative;
        z-index: 7;
    }

    .slide-image {
        max-height: 80px;
        max-width: 80px;
        object-fit: contain;
        margin-right: 15px;
    }

    .slide-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        max-width: calc(100% - 95px);
        padding-bottom: 20px;
        padding-top: 15px;
    }

    .slide-titulo {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        margin: 0 0 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .slide-subtitulo {
        font-size: 12px;
        color: #cccccc;
        margin: 0;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Botão anterior */
    .carousel1-prev-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 18px;
        z-index: 10;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        left: 15px;
    }

    .carousel1-prev-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Botão próximo */
    .carousel1-next-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 18px;
        z-index: 10;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        right: 15px;
    }

    .carousel1-next-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Indicadores de slide (dots) */
    .carousel1-indicators {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 2px;
        z-index: 10;
        width: auto;
    }

    .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: background-color 0.3s;
        pointer-events: auto;
        flex-shrink: 0;
    }

    .indicator.active {
        background-color: #ffffff;
    }

    .indicator:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }

    /* Responsivo para mobile */
    @media (max-width: 768px) {
        .carousel1-container {
            height: 90px;
            padding: 0 10px;
            touch-action: none;
        }

        .slide {
            padding: 0 15px;
        }

        .slide-link {
            padding: 0 15px;
        }

        .slide-titulo {
            font-size: 14px;
            margin-bottom: 2px;
        }

        .slide-subtitulo {
            font-size: 11px;
            line-height: 1.1;
            -webkit-line-clamp: 2;
        }

        .slide-content {
            padding-top: 12px;
            padding-bottom: 18px;
            max-width: calc(100% - 85px);
        }

        .slide-image {
            max-height: 70px;
            max-width: 70px;
            margin-right: 10px;
        }

        .carousel1-prev-btn {
            width: 35px;
            height: 35px;
            font-size: 16px;
            padding: 5px;
            left: 10px;
        }

        .carousel1-next-btn {
            width: 35px;
            height: 35px;
            font-size: 16px;
            padding: 5px;
            right: 10px;
        }

        .carousel1-indicators {
            bottom: 6px;
            gap: 1px;
        }

        .indicator {
            width: 6px;
            height: 6px;
        }

        @media (max-width: 360px) {
            .carousel1-indicators {
                gap: 0;
            }

            .indicator {
                width: 4px;
                height: 4px;
            }
        }

        @media (max-width: 320px) {
            .carousel1-indicators {
                gap: 0;
            }

            .indicator {
                width: 3px;
                height: 3px;
            }
        }
    }
</style>

<div class="carousel1-container">
    <div class="carousel1-slides" id="carousel1Slides">
                                <div class="slide">
                <a href="https://gorgonoid.com/gfarma" class="slide-link" target="_blank">
                                            <img src="/imgs/gfarmanovo.png" class="slide-image" alt="Slide Image">
                                        <div class="slide-content">
                        <h3 class="slide-titulo">GFarma - 50 anos!</h3>
                        <p class="slide-subtitulo">A farmácia mais confiável do Brasil! Use o cupom GO!</p>
                    </div>
                </a>
            </div>

                            <div class="slide">
                    <a href="https://gorgonoid.com/consultoria/" class="slide-link" target="_blank">
                                                    <img src="https://gorgonoid.com/imgs/Consultoria_gorgonoid.png" class="slide-image" alt="Slide Image">
                                                <div class="slide-content">
                            <h3 class="slide-titulo">Quer ter minha consultoria de dieta e treino?!</h3>
                            <p class="slide-subtitulo">Suporte completo 7 dias por semana sem copia e cola!</p>
                        </div>
                    </a>
                </div>
                            <div class="slide">
                    <a href="https://gorgonoid.com/growth" class="slide-link" target="_blank">
                                                    <img src="/imgs/growthlogo.png" class="slide-image" alt="Slide Image">
                                                <div class="slide-content">
                            <h3 class="slide-titulo">Suplementos direto da fábrica</h3>
                            <p class="slide-subtitulo">Compre com o melhor custo-benefício do mercado e use o cupom GO!</p>
                        </div>
                    </a>
                </div>
                            <div class="slide">
                    <a href="https://www.youtube.com/@gorgonoid?sub_confirmation=1" class="slide-link" target="_blank">
                                                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Youtube_logo.png" class="slide-image" alt="Slide Image">
                                                <div class="slide-content">
                            <h3 class="slide-titulo">Inscreva-se no meu Canal</h3>
                            <p class="slide-subtitulo">Acompanhe tudo que acontece no mundo da maromba e fisiculturismo!</p>
                        </div>
                    </a>
                </div>
                            <div class="slide">
                    <a href="https://gorgonoid.com/gfarma" class="slide-link" target="_blank">
                                                    <img src="/imgs/gfarmanovo.png" class="slide-image" alt="Slide Image">
                                                <div class="slide-content">
                            <h3 class="slide-titulo">GFarma - 50 anos!</h3>
                            <p class="slide-subtitulo">A farmácia mais confiável do Brasil! Use o cupom GO!</p>
                        </div>
                    </a>
                </div>
            
            <div class="slide">
                <a href="https://gorgonoid.com/consultoria/" class="slide-link" target="_blank">
                                            <img src="https://gorgonoid.com/imgs/Consultoria_gorgonoid.png" class="slide-image" alt="Slide Image">
                                        <div class="slide-content">
                        <h3 class="slide-titulo">Quer ter minha consultoria de dieta e treino?!</h3>
                        <p class="slide-subtitulo">Suporte completo 7 dias por semana sem copia e cola!</p>
                    </div>
                </a>
            </div>
            </div>
    <button class="carousel1-prev-btn" onclick="moveSlide(-1)">‹</button>
    <button class="carousel1-next-btn" onclick="moveSlide(1)">›</button>

    <div class="carousel1-indicators" id="carousel1Indicators">
                    <span class="indicator active" onclick="goToSlide(0)"></span>
                    <span class="indicator " onclick="goToSlide(1)"></span>
                    <span class="indicator " onclick="goToSlide(2)"></span>
                    <span class="indicator " onclick="goToSlide(3)"></span>
            </div>
</div>

<script>
    // JavaScript inline para o carrossel - automático, próximo, swipe, dots e loop infinito seamless
    document.addEventListener('DOMContentLoaded', function() {
        const carousel1Container = document.querySelector('.carousel1-container');
        const slidesContainer = document.getElementById('carousel1Slides');
        const indicators = document.getElementById('carousel1Indicators');
        const totalRendered = slidesContainer.children.length;
        const numSlides = totalRendered - 2;
        let currentSlide = 1;
        let autoInterval;
        let startX = 0;
        let currentX = 0;
        let isDragging = false;
        let startTime = 0;

        function updatecarousel1() {
            slidesContainer.style.transform = `translateX(-${currentSlide * 100}%)`;
        }

        function updateIndicators(realIndex) {
            Array.from(indicators.children).forEach((dot, index) => {
                dot.classList.toggle('active', index === realIndex);
            });
        }

        function moveSlide(dir) {
            stopAuto();
            const target = currentSlide + dir;
            const isResetPosition = (target === 0 || target === totalRendered - 1);
            const transitionEndHandler = function() {
                if (isResetPosition) {
                    slidesContainer.style.transition = 'none';
                    if (target === 0) {
                        currentSlide = totalRendered - 2;
                    } else {
                        currentSlide = 1;
                    }
                    slidesContainer.style.transform = `translateX(-${currentSlide * 100}%)`;
                    slidesContainer.offsetHeight;
                    slidesContainer.style.transition = 'transform 0.5s ease-in-out';
                } else {
                    currentSlide = target;
                }
                const realIndex = (currentSlide + numSlides - 1) % numSlides;
                updateIndicators(realIndex);
                startAuto();
            };
            slidesContainer.style.transition = 'transform 0.5s ease-in-out';
            slidesContainer.style.transform = `translateX(-${target * 100}%)`;
            slidesContainer.addEventListener('transitionend', transitionEndHandler, {
                once: true
            });
        }

        function nextSlide() {
            moveSlide(1);
        }

        function prevSlide() {
            moveSlide(-1);
        }

        function goToSlide(index) {
            stopAuto();
            const target = index + 1;
            slidesContainer.style.transition = 'transform 0.5s ease-in-out';
            slidesContainer.style.transform = `translateX(-${target * 100}%)`;
            currentSlide = target;
            updateIndicators(index);
            startAuto();
        }

        function startAuto() {
            autoInterval = setInterval(nextSlide, 7000);
        }

        function stopAuto() {
            clearInterval(autoInterval);
        }

        window.moveSlide = moveSlide;
        window.goToSlide = goToSlide;

        carousel1Container.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            currentX = startX;
            startTime = Date.now();
            isDragging = true;
            stopAuto();
            slidesContainer.style.transition = 'none';
        }, {
            passive: true
        });

        carousel1Container.addEventListener('touchmove', function(e) {
            if (!isDragging) return;
            e.preventDefault();
            currentX = e.touches[0].clientX;
            const deltaX = currentX - startX;
            slidesContainer.style.transform = `translateX(calc(-${currentSlide * 100}% + ${deltaX}px))`;
        }, {
            passive: false
        });

        carousel1Container.addEventListener('touchend', function(e) {
            if (!isDragging) return;
            isDragging = false;
            const endX = currentX;
            const deltaX = endX - startX;
            const deltaTime = Date.now() - startTime;
            const velocity = Math.abs(deltaX / deltaTime);

            const threshold = 30;
            const velocityThreshold = 0.3;

            slidesContainer.style.transition = 'transform 0.3s ease-in-out';

            if (deltaX > threshold || (velocity > velocityThreshold && deltaX > 0)) {
                prevSlide();
            } else if (deltaX < -threshold || (velocity > velocityThreshold && deltaX < 0)) {
                nextSlide();
            } else {
                updatecarousel1();
            }

            startAuto();
        }, {
            passive: true
        });

        updatecarousel1();
        const initialRealIndex = (currentSlide + numSlides - 1) % numSlides;
        updateIndicators(initialRealIndex);
        startAuto();
    });
</script>    </section>




       <!-- Video Section -->
    <section class="video-section" id="videos">
        
        <div class="container">
            <div class="section-title">
                <h2>Últimos <span>Vídeos</span></h2>
                <p>Confira as últimas produções do canal (ative o 🔊 som caso esteja mudo)</p>
            </div>

            <div class="video-container">
                
                <div class="main-video">
                    <iframe id="mainVideoPlayer" src=""
                        title="YouTube video player"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>

                
                <div class="carousel-container" id="carouselContainer">
                                            <div class="video-thumb" data-video-id="AFFBRXb1q-0" style="">
                            <img src="https://img.youtube.com/vi/AFFBRXb1q-0/0.jpg" alt="Vídeo 1">
                        </div>
                                            <div class="video-thumb" data-video-id="fYUI28YRwEQ" style="">
                            <img src="https://img.youtube.com/vi/fYUI28YRwEQ/0.jpg" alt="Vídeo 2">
                        </div>
                                            <div class="video-thumb" data-video-id="6eRJG3gUtiA" style="">
                            <img src="https://img.youtube.com/vi/6eRJG3gUtiA/0.jpg" alt="Vídeo 3">
                        </div>
                                            <div class="video-thumb" data-video-id="fvn4rRTtNQs" style="">
                            <img src="https://img.youtube.com/vi/fvn4rRTtNQs/0.jpg" alt="Vídeo 4">
                        </div>
                                            <div class="video-thumb" data-video-id="JoD9iGSkHRM" style="">
                            <img src="https://img.youtube.com/vi/JoD9iGSkHRM/0.jpg" alt="Vídeo 5">
                        </div>
                                            <div class="video-thumb" data-video-id="6l6n8_2hgTU" style="">
                            <img src="https://img.youtube.com/vi/6l6n8_2hgTU/0.jpg" alt="Vídeo 6">
                        </div>
                                            <div class="video-thumb" data-video-id="7FM6_Yu-t1Y" style="display:none;">
                            <img src="https://img.youtube.com/vi/7FM6_Yu-t1Y/0.jpg" alt="Vídeo 7">
                        </div>
                                            <div class="video-thumb" data-video-id="FXjNczbbl-c" style="display:none;">
                            <img src="https://img.youtube.com/vi/FXjNczbbl-c/0.jpg" alt="Vídeo 8">
                        </div>
                                            <div class="video-thumb" data-video-id="ODZe4lgwO64" style="display:none;">
                            <img src="https://img.youtube.com/vi/ODZe4lgwO64/0.jpg" alt="Vídeo 9">
                        </div>
                                            <div class="video-thumb" data-video-id="n2ndRspjZEI" style="display:none;">
                            <img src="https://img.youtube.com/vi/n2ndRspjZEI/0.jpg" alt="Vídeo 10">
                        </div>
                                            <div class="video-thumb" data-video-id="gCFC4tfqQpU" style="display:none;">
                            <img src="https://img.youtube.com/vi/gCFC4tfqQpU/0.jpg" alt="Vídeo 11">
                        </div>
                                            <div class="video-thumb" data-video-id="ACw_IUv7030" style="display:none;">
                            <img src="https://img.youtube.com/vi/ACw_IUv7030/0.jpg" alt="Vídeo 12">
                        </div>
                                            <div class="video-thumb" data-video-id="v-K68U46TVE" style="display:none;">
                            <img src="https://img.youtube.com/vi/v-K68U46TVE/0.jpg" alt="Vídeo 13">
                        </div>
                                            <div class="video-thumb" data-video-id="URunbonJx_k" style="display:none;">
                            <img src="https://img.youtube.com/vi/URunbonJx_k/0.jpg" alt="Vídeo 14">
                        </div>
                                            <div class="video-thumb" data-video-id="RFCZsfObF4E" style="display:none;">
                            <img src="https://img.youtube.com/vi/RFCZsfObF4E/0.jpg" alt="Vídeo 15">
                        </div>
                                            <div class="video-thumb" data-video-id="_76Z3QkgrfE" style="display:none;">
                            <img src="https://img.youtube.com/vi/_76Z3QkgrfE/0.jpg" alt="Vídeo 16">
                        </div>
                                            <div class="video-thumb" data-video-id="gAooPmOalcY" style="display:none;">
                            <img src="https://img.youtube.com/vi/gAooPmOalcY/0.jpg" alt="Vídeo 17">
                        </div>
                                            <div class="video-thumb" data-video-id="H3Z0SmGt3yg" style="display:none;">
                            <img src="https://img.youtube.com/vi/H3Z0SmGt3yg/0.jpg" alt="Vídeo 18">
                        </div>
                                            <div class="video-thumb" data-video-id="kwKoi5eAY4s" style="display:none;">
                            <img src="https://img.youtube.com/vi/kwKoi5eAY4s/0.jpg" alt="Vídeo 19">
                        </div>
                                            <div class="video-thumb" data-video-id="2MlBG4UvtMk" style="display:none;">
                            <img src="https://img.youtube.com/vi/2MlBG4UvtMk/0.jpg" alt="Vídeo 20">
                        </div>
                                            <div class="video-thumb" data-video-id="nJnE8p8uOHs" style="display:none;">
                            <img src="https://img.youtube.com/vi/nJnE8p8uOHs/0.jpg" alt="Vídeo 21">
                        </div>
                                            <div class="video-thumb" data-video-id="_cVkq-MIeAc" style="display:none;">
                            <img src="https://img.youtube.com/vi/_cVkq-MIeAc/0.jpg" alt="Vídeo 22">
                        </div>
                                            <div class="video-thumb" data-video-id="9mUFDUdBG00" style="display:none;">
                            <img src="https://img.youtube.com/vi/9mUFDUdBG00/0.jpg" alt="Vídeo 23">
                        </div>
                                            <div class="video-thumb" data-video-id="Qb4g-6wnFSQ" style="display:none;">
                            <img src="https://img.youtube.com/vi/Qb4g-6wnFSQ/0.jpg" alt="Vídeo 24">
                        </div>
                                            <div class="video-thumb" data-video-id="LiROwLdUM_A" style="display:none;">
                            <img src="https://img.youtube.com/vi/LiROwLdUM_A/0.jpg" alt="Vídeo 25">
                        </div>
                                            <div class="video-thumb" data-video-id="g4YqRUMnysU" style="display:none;">
                            <img src="https://img.youtube.com/vi/g4YqRUMnysU/0.jpg" alt="Vídeo 26">
                        </div>
                                            <div class="video-thumb" data-video-id="t1Nd2QtvhXs" style="display:none;">
                            <img src="https://img.youtube.com/vi/t1Nd2QtvhXs/0.jpg" alt="Vídeo 27">
                        </div>
                                            <div class="video-thumb" data-video-id="6bG5cqSY2AE" style="display:none;">
                            <img src="https://img.youtube.com/vi/6bG5cqSY2AE/0.jpg" alt="Vídeo 28">
                        </div>
                                            <div class="video-thumb" data-video-id="uhNqNHgSMwE" style="display:none;">
                            <img src="https://img.youtube.com/vi/uhNqNHgSMwE/0.jpg" alt="Vídeo 29">
                        </div>
                                            <div class="video-thumb" data-video-id="dyxycVbmWSA" style="display:none;">
                            <img src="https://img.youtube.com/vi/dyxycVbmWSA/0.jpg" alt="Vídeo 30">
                        </div>
                                    </div>


                <div class="video-cta">
                    <a href="https://www.youtube.com/@gorgonoid?sub_confirmation=1" target="_blank" class="btn">
                        <i class="fab fa-youtube"></i> Ver Canal Completo
                    </a>
                </div>
            </div>
        </div>
    </section>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mainVideoPlayer = document.getElementById('mainVideoPlayer');
            const carouselContainer = document.getElementById('carouselContainer');
            const thumbs = document.querySelectorAll('.video-thumb');

            let videosShown = 6;
            const step = 6;

            // Clique nas thumbs com autoplay
            thumbs.forEach(thumb => {
                thumb.addEventListener('click', function() {
                    const videoId = this.getAttribute('data-video-id');
                    if (videoId) {
                        mainVideoPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&modestbranding=1&rel=0`;
                    }
                });
            });

            // Exibe primeiro vídeo com autoplay
            if (thumbs.length > 0) {
                const firstVideoId = thumbs[0].getAttribute('data-video-id');
                mainVideoPlayer.src = `https://www.youtube.com/embed/${firstVideoId}?autoplay=1&mute=1&playsinline=1&cc_load_policy=1&cc_lang_pref=pt&hl=pt-BR&modestbranding=1&rel=0`;
            }

            // Scroll horizontal → revela mais vídeos quando atinge fim da rolagem
            carouselContainer.addEventListener('scroll', function() {
                const {
                    scrollLeft,
                    scrollWidth,
                    clientWidth
                } = carouselContainer;
                if (scrollLeft + clientWidth >= scrollWidth - 5) {
                    // Revela próximos vídeos
                    let revealed = 0;
                    for (let i = videosShown; i < thumbs.length && revealed < step; i++) {
                        thumbs[i].style.display = 'block';
                        revealed++;
                    }
                    videosShown += revealed;
                }
            });
        });
    </script>

    <!-- Sponsors Section -->
    <section class="sponsors-section" id="sponsors">
        <div class="container">
            <div class="section-title">
                <h2><span>Patrocinadores</span> OFICIAIS</h2>
                <p>Compre direto da fábrica e use o cupom <span style="color: red; font-weight: bold;">GO</span> para ganhar desconto dos apoiadores oficiais do canal!</p>
            </div>

            <div class="sponsors-grid">
                <!-- Sponsors will be added dynamically -->
            </div>
        </div>
    </section>

    <!-- App Section -->
    <section class="app-section" id="app">
        <div class="container">
            <div class="app-container">
                <div class="app-image">
                    <div class="phone-mockup"></div>
                </div>
                <div class="app-content">
                    <h2><span>GorgoApp</span> - Tudo que você precisa, no seu bolso</h2>
                    <p>Com qualquer plano você tem acesso ao nosso app exclusivo, sem anúncios, com ferramentas
                        completas para acompanhar sua evolução.</p>

                    <div class="app-features">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div>
                                <h3>Gráficos de evolução</h3><p>Acompanhe seu progresso</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-dumbbell"></i>
                            </div>
                            <div>
                                <h3>Registro de treinos</h3>
                                <p>Registre cargas progressivas</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-user-check"></i>
                            </div>
                            <div>
                                <h3>Avaliação física</h3>
                                <p>Avaliação digital com histórico</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div>
                                <h3>Notificações</h3>
                                <p>Lembretes para sua rotina</p>
                            </div>
                        </div>
                    </div>

                    <div class="app-buttons">
                        <a href="https://apps.apple.com/br/app/gorgoapp/id6469431835?l=en-GB" target="_blank">
                            <i class="fab fa-apple"></i> iPhone
                        </a>
                        <a href="https://play.google.com/store/apps/details?id=com.gorgonoid.gorgoapp&hl=pt_BR"target="_blank"><iclass="fab fa-google-play"></i> Android
                        </a>
                        <a href="https://app.gorgonoid.com/" target="_blank">
                            <i class="fas fa-globe"></i> Versão Web
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

   <!-- calculator Section -->
<section class="calculators-section" id="calculators">
    <div class="container">
        <div class="section-title">
            <h2>Calculadoras <span>Fitness</span></h2>
            <p>Ferramentas rápidas para seus cálculos</p>
        </div>

        <div class="calculators-grid">
            <div class="calculator-card">
                <a href="dietarapida.php" class="calculator-full-link" aria-label="Dieta Flexível Fácil"></a>
                <div class="calculator-icon">
                    <i class="fas fa-utensils"></i>
                </div>
                <h3>Dieta Flexível Fácil</h3>
                <p>Simplifique a montagem da sua dieta com esta calculadora que determina seus macronutrientes de forma prática e eficiente!</p>
                <a href="dietarapida.php" class="btn">Acessar Calculadora</a>
            </div>

            <div class="calculator-card">
                <a href="dietaavancada.php" class="calculator-full-link" aria-label="Dieta Avançada"></a>
                <div class="calculator-icon">
                    <i class="fas fa-dumbbell"></i>
                </div>
                <h3>Dieta Avançada</h3>
                <p>Calcule seus macronutrientes com precisão e alcance seus objetivos com esta ferramenta completa!</p>
                <a href="dietaavancada.php" class="btn">Acessar Calculadora</a>
            </div>

            <div class="calculator-card">
                <a href="whey.php" class="calculator-full-link" aria-label="Compare seu Whey"></a>
                <div class="calculator-icon">
                    <i class="fas fa-shopping-cart"></i>
                </div>
                <h3>Compare seu Whey</h3>
                <p>Compare o preço por grama de proteína para encontrar o whey mais econômico, sem complicações.</p>
                <a href="whey.php" class="btn">Acessar Calculadora</a>
            </div>

            <div class="calculator-card">
                <a href="ciclo.php" class="calculator-full-link" aria-label="Ciclo de Carboidratos"></a>
                <div class="calculator-icon">
                    <i class="fas fa-redo"></i>
                </div>
                <h3>Ciclo de Carboidratos</h3>
                <p>Planeje seu protocolo de ciclo de carboidratos (2/1, 3/1 ou 4/1) com base nos seus macros para otimizar sua dieta.</p>
                <a href="ciclo.php" class="btn">Acessar Calculadora</a>
            </div>

            <div class="calculator-card">
                <a href="tmb.php" class="calculator-full-link" aria-label="Taxa Metabólica Basal"></a>
                <div class="calculator-icon">
                    <i class="fas fa-heartbeat"></i>
                </div>
                <h3>Taxa Metabólica Basal</h3>
                <p>Descubra quantas calorias seu corpo queima em repouso para personalizar sua dieta com precisão.</p>
                <a href="tmb.php" class="btn">Acessar Calculadora</a>
            </div>

            <div class="calculator-card">
                <a href="bf.php" class="calculator-full-link" aria-label="% de Gordura Corporal"></a>
                <div class="calculator-icon">
                    <i class="fas fa-percentage"></i>
                </div>
                <h3>% de Gordura Corporal</h3>
                <p>Estime seu percentual de gordura corporal para acompanhar seu progresso e ajustar seus objetivos.</p>
                <a href="bf.php" class="btn">Acessar Calculadora</a>
            </div>

            <div class="calculator-card">
                <a href="potencial.php" class="calculator-full-link" aria-label="Potencial Genético"></a>
                <div class="calculator-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3>Potencial Genético</h3>
                <p>Estime seu potencial genético de ganho muscular com base em estudos com atletas naturais (homens).</p>
                <a href="potencial.php" class="btn">Acessar Calculadora</a>
            </div>
        </div>
    </div>
</section>


    <!-- Consultation Section -->
    <section class="consultation-section" id="consultation">
        <div class="container">
            <div class="section-header">
                <h2><a href="https://gorgonoid.com/consultoria">Consultoria Esportiva</a></h2>
                <p class="section-subtitle">Transforme seu físico com resultados reais através de treino, dieta e
                    suporte profissional personalizado</p>
            </div>

            <div class="consultation-content">
                <a href="https://gorgonoid.com/consultoria"><div class="gorgonoid-photo">
                    <img src="imgs/gorgonoid5.jpg" alt="Gorgonoid - Consultor Esportivo">
                </div></a>
                <div class="content-text">
                    <h3>Treinos e dietas <span class="highlight-text">100% personalizados</span> para seus objetivos
                    </h3>
                    <p>Tenha acesso a um acompanhamento profissional completo com foco total nos seus resultados. Nossa
                        metodologia comprovada combina treinos eficientes com estratégias nutricionais personalizadas.
                    </p>
                    <p>Venha para a minha <span class="highlight-text"><a href="https://gorgonoid.com/consultoria">Consultoria</a></span> e transforme não apenas seu físico,
                        mas sua mentalidade e estilo de vida! Entre para o meu time: <span class="highlight-text"><a href="https://gorgonoid.com/consultoria">GorgoTEAM!</a></span></p>
                    <a href="https://gorgonoid.com/consultoria"><div class="gorgoteam-logo">
                        <img src="imgs/gorGO_team5.png" alt="GorgoTEAM Logo"></a>
                    </div>
                </div>
            </div>


            <!-- Antes e Depois Carousel -->
            <section id="before-after" class="before-after">
                <div class="container">
                    <div class="section-title">
                        <h1>Confira as transformações de quem seguiu os planos com disciplina e apoio do GorgoTeam</h1>
                    </div>

                    <div class="transformations-container">
                        <div class="slider-arrow prev" onclick="prevTransformation()">
                            <i class="fas fa-chevron-left"></i>
                        </div>

                        <div class="transformations-slider" id="transformationsSlider">
                            <!-- As fotos serão adicionadas dinamicamente pelo JavaScript -->
                        </div>

                        <div class="slider-arrow next" onclick="nextTransformation()">
                            <i class="fas fa-chevron-right"></i>
                        </div>

                        <div class="slider-nav" id="sliderNav">
                            <!-- Os pontos serão adicionados via JavaScript -->
                        </div>
                    </div>
                </div>
            </section>
            <div class="cta-button">
                <a href="https://gorgonoid.com/consultoria" class="btn">Clique aqui para ver os planos</a>
            </div>
        </div>
    </section>
    <!-- Gyms Section -->
<section class="gyms-section" id="gyms">
    <div class="container">
        <div class="section-title">
            <h2>Conheça as unidades da <span>GO Training Center</span></h2>
            <p>Verdadeiros Centros de Treinamento iguais você vê os melhores atletas do mundo treinando ao seu alcance!</p>
        </div>

        <div class="gyms-grid">
            
            <a href="https://gorgonoid.com/gotimirim" class="gym-card">
                <div class="gym-header">
                    <img style="background-color: transparent;" src="imgs/gologo1.png"
                        alt="GO Training Center Logo" class="gym-logo">
                </div>
                <div class="gym-content">
                    <h3>GO - Timirim</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Praça Olímpica, 36 - Funcionários, Timóteo - MG, 35180-414</p>
                    <p><i class="fas fa-phone"></i> (31) 99797-9472</p>
                    <span class="gym-link">Clique aqui e saiba mais</span>
                </div>
            </a>

            <a href="https://gorgonoid.com/gocentrosul" class="gym-card">
                <div class="gym-header">
                    <img style="background-color: transparent;" src="imgs/gologo1.png"
                        alt="GO Training Center Logo" class="gym-logo">
                </div>
                <div class="gym-content">
                    <h3>GO - Centro Sul</h3>
                    <p><i class="fas fa-map-marker-alt"></i> R. João de Assis Martins, 132 - Centro Sul, Timóteo - MG, 35182-036</p>
                    <p><i class="fas fa-phone"></i> (31) 99709-1128</p>
                    <span class="gym-link">Clique aqui e saiba mais</span>
                </div>
            </a>
            
            
            
            <a href="https://gorgonoid.com/go_limoeiro.php" class="gym-card">
                <div class="gym-header">
                    <img style="background-color: transparent;" src="imgs/gologo1.png"
                        alt="GO Training Center Logo" class="gym-logo">
                </div>
                <div class="gym-content">
                    <h3>GO - Limoeiro</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Av. Pinheiro, 85 - Limoeiro, Timóteo - MG, 35181-402</p>
                    <p><i class="fas fa-phone"></i> (31) 99797-9472</p>
                    <span class="gym-link">Clique aqui e saiba mais</span>
                </div>
            </a>
            
            <a href="https://gorgonoid.com/gomaceio" class="gym-card">
                <div class="gym-header">
                    <img style="background-color: transparent;" src="imgs/gologo1.png"
                        alt="GO Training Center Logo" class="gym-logo">
                </div>
                <div class="gym-content">
                    <h3>GO - Maceió</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Av. Tancredo Neves, 9 - Cidade Universitária, Maceió - AL, 57073-383</p>
                    <p><i class="fas fa-phone"></i> (82) 99188-5344</p>
                    <span class="gym-link">Clique aqui e saiba mais</span>
                </div>
            </a>
            
            <a href="https://gorgonoid.com/go_ipatinga.php" class="gym-card">
                <div class="gym-header">
                    <img style="background-color: transparent;" src="imgs/gologo1.png"
                        alt="GO Training Center Logo" class="gym-logo">
                </div>
                <div class="gym-content">
                    <h3>GO - Ipatinga</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Rua Jaspe, 360 - Iguaçu, Ipatinga - MG, 35162-077</p>
                    <p><i class="fas fa-phone"></i> (31) 97129-4421</p>
                    <span class="gym-link">Clique aqui e saiba mais</span>
                </div>
            </a>
            
            <a href="https://gorgonoid.com/uboxgo" class="gym-card">
                <div class="gym-header">
                    <img style="background-color: transparent;" src="imgs/uboxgologo.png" alt="UBOX Logo" class="gym-logo">
                </div>
                <div class="gym-content">
                    <h3>UBOX GO</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Rua Jaspe, 360 - Iguaçu, Ipatinga - MG, 35162-077</p>
                    <p><i class="fas fa-phone"></i> (31) 97129-4421</p>
                    <span class="gym-link">Clique aqui e saiba mais</span>
                </div>
            </a>

              

        </div>
    </div>
</section>


    <style>
        .gyms-section {
            background: var(--color-black);
        }

        .gyms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 80px;
        }

        .gym-card {
            background: var(--color-dark);
            border-radius: 10px;
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .gym-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(211, 47, 47, 0.2);
            border-color: var(--color-red);
        }

        .gym-header {
            padding: 20px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .gym-logo {
            max-width: 150px;
            height: 80px;
            object-fit: contain;
            margin: 0 auto;
            display: block;
            background: var(--color-white);
            padding: 10px;
            border-radius: 8px;
        }

        .gym-content {
            padding: 20px;
            flex-grow: 1;
        }

        .gym-content h3 {
            color: var(--color-red);
            margin-bottom: 10px;
        }

        .gym-content p {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .gym-link {
            display: none;
            text-align: center;
            background: var(--color-red);
            color: var(--color-white);
            padding: 10px;
            font-weight: 600;
            border-radius: 4px;
            margin-top: 15px;
            transition: var(--transition);
        }

        .gym-link:hover {
            background: var(--color-red-dark);
            color: white;
        }

        /* Estilos para o modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            overflow: auto;
        }

        .modal-content {
            position: relative;
            margin: auto;
            padding: 0;
            width: 95%;
            max-width: 1200px;
            height: 95vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-image {
            max-width: 100%;
            max-height:90vh;
            object-fit: contain;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
            z-index: 1001;
            padding: 10px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .close:hover {
            color: var(--vermelho);
            background: rgba(0, 0, 0, 0.8);
        }

        .close:active {
            transform: scale(0.9);
            .gym-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.gym-card:hover {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
        }
        
        /* === Gyms: 3 por linha e última linha centralizada === */
.gyms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  justify-content: center; /* centraliza linha incompleta */
}

/* 3 colunas no desktop */
.gyms-grid .gym-card {
  flex: 0 0 calc((100% - (3 - 1) * 80px) / 3);
  max-width: calc((100% - (3 - 1) * 80px) / 3);
}

/* 2 colunas no tablet */
@media (max-width: 1024px) {
  .gyms-grid .gym-card {
    flex: 0 0 calc((100% - (2 - 1) * 80px) / 2);
    max-width: calc((100% - (2 - 1) * 80px) / 2);
  }
}

/* 1 coluna no mobile */
@media (max-width: 640px) {
  .gyms-grid .gym-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

    </style>
    <!-- About Gorgonoid Section -->
    <section class="about-gorgonoid-section" id="about-gorgonoid">
        <div class="container">
            <div class="section-title">
                <h2>Quem sou <span>eu</span>?</h2>
            </div>

            <div class="about-gorgo">
                <div class="about-image"><img src="imgs/gorgonoid1.jpg" alt="Gorgonoid">
                </div><div class="about-content">
                    <h2>Paixão por <span>Musculação</span> e Conhecimento</h2>
                    <p>Gorgonoid é um apaixonado por musculação, dedicado a aprender tudo – mas tudo mesmo – sobre o
                        assunto. Sua missão é transformar conhecimento complexo em informações simples e acessíveis,
                        capazes de mudar vidas. Com centenas de depoimentos de pessoas impressionadas pela clareza e
                        impacto de suas explicações, ele descomplica a ciência do treino e da nutrição para todos,
                        independentemente do nível de experiência.</p>
                    <p>Junte-se à comunidade Gorgonoid e descubra como alcançar seus objetivos com uma abordagem direta,
                        prática e sem enrolação!</p>
                    <a href="https://gorgonoid.com/consultoria" class="btn">Clique aqui para ter minha consultoria</a>
                </div>
            </div>
        </div>
    </section>

    <style>
        .about-gorgonoid-section {
            background: var(--color-dark);
            position: relative;
            overflow: hidden;
        }

        .about-gorgo {
            display: flex;
            align-items: center;
            gap: 50px;
            margin-top: 40px;
        }

        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .about-content {
            flex: 1;
        }

        .about-content h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .about-content h2 span {
            color: var(--color-red);
        }

        .about-content p {
            margin-bottom: 15px;
        }

        @media (max-width: 992px) {
            .about-gorgo {
                flex-direction: column;
            }
        }
    </style>
    
    <style>
@media (max-width: 767px) {
    h1 {
        font-size: 2.2rem !important;
        
}
</style>


    <!-- Footer -->
    <footer>
  <div class="container">
    <div class="footer-container">
      <div class="footer-about">
        <a href="https://gorgonoid.com/" class="logo"><img src="https://gorgonoid.com/imgs/gorgonoidlogo.png" alt="Gorgonoid Logo"></a>
        <p>Conteúdo direto, sem enrolação, feito para quem quer informação de verdade.</p>
        <div class="footer-social">
          <a href="https://www.youtube.com/@gorgonoid?sub_confirmation=1" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
          <a href="https://www.instagram.com/gorgonoid" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
          <a href="https://www.tiktok.com/@gorgonoid" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
          <a href="https://x.com/gorgonoid_" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="X"><i class="fab fa-twitter"></i></a>
          <a href="https://t.me/gorgonoid" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="Telegram"><i class="fab fa-telegram"></i></a>
        </div>
      </div>

      <div class="footer-links">
        <h3>GorgoAPP</h3>
        <ul>
          <li><a href="https://app.gorgonoid.com" target="_blank" rel="noopener noreferrer">Acesso Web</a></li>
          <li><a href="https://apps.apple.com/br/app/gorgoapp/id6469431835?l=pt-BR" target="_blank" rel="noopener noreferrer">Download iPhone</a></li>
          <li><a href="https://play.google.com/store/apps/details?id=com.gorgonoid.gorgoapp&hl=pt_BR" target="_blank" rel="noopener noreferrer">Download Android</a></li>
          <li><a href="https://app.gorgonoid.com/politica.php">Privacidade</a></li>
          <li><a href="https://app.gorgonoid.com/termos.php">Termos</a></li>
        </ul>
      </div>

      <div class="footer-links">
        <h3><a href="https://gorgonoid.com/go.php">Academias</a></h3>
        <ul>
          <li><a href="https://gorgonoid.com/go.php"><b>Conheça a Rede GO</b></a></li>
          <li><a href="https://gorgonoid.com/go_timirim.php">GO Training Center - Timirim</a></li>
          <li><a href="https://gorgonoid.com/go_centro_sul.php">GO Training Center - Centro Sul</a></li>
          <li><a href="https://gorgonoid.com/go_limoeiro.php">GO Training Center - Limoeiro</a></li>
          <li><a href="https://gorgonoid.com/golilheus">GO Training Center - Ilhéus</a></li>
          <li><a href="https://gorgonoid.com/gomaceio.php">GO Training Center - Maceió</a></li>
          <li><a href="https://gorgonoid.com/go_ipatinga.php">GO Training Center - Ipatinga</a></li>
          <li><a href="https://gorgonoid.com/ubox.php">UBOX GO - Ipatinga</a></li>
        </ul>
      </div>

      <div class="footer-links">
        <h3>Consultoria</h3>
        <ul>
          <li><a href="https://gorgonoid.com/consultoria">GorgoTEAM</a></li>
          <li><a href="https://wa.me/5531998385296"><i class="fab fa-whatsapp" style="margin-right:5px;"></i>WhatsApp GorgoTEAM</a></li>
          <li><a href="#">GorgoIA - Em breve!</a></li>
        </ul>
        <hr style="border:none;border-top:1px solid #444;margin:10px 0;">
        <div style="text-align:center;"><a href="https://gorgonoid.com/links" style="color:#fff;text-decoration:underline;font-size:14px;">Links Rápidos clique aqui!</a></div>
      </div>
    </div>

    <div class="footer-bottom">
      <p>&copy; 2026 Gorgonoid.com - Todos os direitos reservados</p>
    </div>
  </div>
</footer>
    <div id="imageModal" class="modal">
        <span class="close" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <img id="expandedImage" class="modal-image">
        </div>
    </div>

    <script>
        const transformationsSlider = document.getElementById('transformationsSlider');
        const sliderNav = document.getElementById('sliderNav');

for (let i = 1; i <= 16; i++) {
    if (i === 6) continue; // ignora o a-6.jpg

    const transformationItem = document.createElement('div');
    transformationItem.className = 'transformation-item';
    transformationItem.innerHTML = `
        <div class="transformation-image" onclick="openModal('https://gorgonoid.com/consultoria/antesedepois/a-${i}.jpg')">
            <img src="https://gorgonoid.com/consultoria/antesedepois/a-${i}.jpg" alt="Transformação ${i}">
        </div>
    `;
    transformationsSlider.appendChild(transformationItem);
}


        // Variáveis do carrossel
        let currentSlide = 0;
        let slidesPerView = 4;
        let autoSlideInterval;
        let slides = [];

        // Atualizar slides por viewport
        function updateSlidesPerView() {
            const viewportWidth = window.innerWidth;
            if (viewportWidth >= 1200) slidesPerView = 4;
            else if (viewportWidth >= 992) slidesPerView = 3;
            else if (viewportWidth >= 768) slidesPerView = 2;
            else slidesPerView = 1;
        }

        // Criar pontos de navegação baseados no número de slides por view
        function createSliderDots() {
            sliderNav.innerHTML = ''; // Limpar dots existentes
            slides = document.querySelectorAll('.transformation-item');
            const totalPages = Math.ceil(slides.length / slidesPerView);

            for (let i = 0; i < totalPages; i++) {
                const dot = document.createElement('div');
                dot.className = 'slider-dot';
                if (i === 0) dot.classList.add('active');
                dot.setAttribute('data-index', i);
                dot.addEventListener('click', () => showSlide(i * slidesPerView));
                sliderNav.appendChild(dot);
            }
        }

        // Mostrar slide específico
        function showSlide(index) {
            updateSlidesPerView();
            slides = document.querySelectorAll('.transformation-item');

            currentSlide = index;

            // Limitar índice máximo
            const maxSlide = Math.max(0, slides.length - slidesPerView);
            if (currentSlide > maxSlide) currentSlide = 0; // Voltar ao início
            if (currentSlide < 0) currentSlide = maxSlide;

            const offset = -currentSlide * (100 / slidesPerView);
            transformationsSlider.style.transform = `translateX(${offset}%)`;

            // Atualizar pontos de navegação
            const dots = document.querySelectorAll('.slider-dot');
            const activeDotIndex = Math.floor(currentSlide / slidesPerView);
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === activeDotIndex);
            });
        }

        // Próximo slide (com loop infinito)
        function nextTransformation() {
            updateSlidesPerView();
            slides = document.querySelectorAll('.transformation-item');

            if (currentSlide >= slides.length - slidesPerView) {
                currentSlide = 0; // Voltar ao início} else {
                currentSlide += slidesPerView;
            }

            showSlide(currentSlide);
        }

        // Slide anterior
        function prevTransformation() {
            updateSlidesPerView();
            slides = document.querySelectorAll('.transformation-item');

            if (currentSlide <= 0) {
                currentSlide = slides.length - slidesPerView;
            } else {
                currentSlide -= slidesPerView;
            }

            showSlide(currentSlide);
        }

        // Iniciar animação automática
        function startAutoSlide() {
            autoSlideInterval = setInterval(nextTransformation, 4000); // 4 segundos
        }

        // Parar animação automática
        function stopAutoSlide() {
            clearInterval(autoSlideInterval);
        }

        // Pausar animação ao passar o mouse
        if (transformationsSlider) {
            transformationsSlider.addEventListener('mouseenter', stopAutoSlide);
            transformationsSlider.addEventListener('mouseleave', startAutoSlide);
        }

        // Evento de redimensionamento
        window.addEventListener('resize', () => {
            updateSlidesPerView();
            createSliderDots();
            showSlide(currentSlide);
        });
        // Modal para fotos expandidas
        function openModal(imageSrc) {
            const modal = document.getElementById('imageModal');
            const expandedImg = document.getElementById('expandedImage');
            expandedImg.src = imageSrc;
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            document.getElementById('imageModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Fechar modal ao clicar fora da imagem
        window.addEventListener('click', (e) => {
            const modal = document.getElementById('imageModal');
            if (e.target === modal) {
                closeModal();
            }
        });

        // Fechar modal com ESC
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeModal();
            }
        });

        // Inicializar carrossel de resultados
        document.addEventListener('DOMContentLoaded', () => {
            updateSlidesPerView();
            createSliderDots();
            showSlide(0);startAutoSlide(); // Iniciar animação automática
        });


        // Sponsors Data
        // Sponsors Data
const sponsors = [
    {
        name: 'G Farma',
        description: 'Manipulados personalizados com confiança e qualidade farmacêutica',
        logo: 'imgs/gfarmanovo.png',
        link: 'https://gfarma.com/',
        coupon: 'Cupom: GO'
    },{
        name: 'Suplementos ???',
        description: 'Suplementos direto da fábrica, qualidade e economia pra você',
        logo: '',
        link: '',
        coupon: 'Cupom: GO'
    },
    {
        name: 'Cimerian',
        description: 'Máquinas para academia, Biomecânica de alto nível para seu gym',
        logo: 'imgs/CimerianLogo.png',
        link: 'https://cimerianofficial.com/',
        coupon: 'Cupom: GO'
    },
    {
        name: 'Alpha CO',
        description: 'Roupas de treino e casuais, Estilo que acompanha sua performance',
        logo: 'imgs/Alphaco.png',
        link: 'https://usealphaco.com.br/',
        coupon: 'Cupom: GO'
    },
    {
        name: 'Insider',
        description: 'Roupas tecnológicas, Conforto, inovação e sustentabilidade',
        logo: 'imgs/insiderlogo.png',
        link: 'https://insiderstore.com.br/gorgonoid',
        coupon: 'Cupom: GO'
    }
];

const sponsorsGrid = document.querySelector('.sponsors-grid');

sponsors.forEach(sponsor => {
    const sponsorCard = document.createElement('div');
    sponsorCard.className = 'sponsor-card';
    sponsorCard.style.position = 'relative';

    const needsBlackBg = ['Suplementos ???', 'MITH', 'FJR iPhone', 'Sistema Actuar', 'Insider', 'Cimerian'].includes(sponsor.name);
    const logoStyle = needsBlackBg ? 'background-color: transparent;' : '';

    sponsorCard.innerHTML = `
        ${sponsor.link ? `<a href="${sponsor.link}" target="_blank" rel="noopener noreferrer" class="sponsor-full-link"></a>` : ''}
        <div class="sponsor-header">
            ${sponsor.logo ? `<img src="${sponsor.logo}" alt="${sponsor.name}" class="sponsor-logo" style="${logoStyle} padding: 8px;">` : `<div class="sponsor-logo" aria-label="Logo temporariamente indisponível" style="${logoStyle} padding: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: 700;">???</div>`}
        </div>
        <div class="sponsor-content">
            <h3>${sponsor.name}</h3>
            <p>${sponsor.description}</p>
        </div>
    `;
    sponsorsGrid.appendChild(sponsorCard);
});

        // Scroll Animation
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate');
                }
            });
        }, observerOptions);

        document.querySelectorAll('section').forEach(section => {
            observer.observe(section);
        });
        // Mobile Menu Toggl
        mobileMenuBtn.addEventListener('click', () => {
            const isActive = navMenu.classList.toggle('active');
            mobileMenuBtn.innerHTML = isActive ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

        // Smooth Scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                navMenu.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';

                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);

                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            });
        });

        // Dropdown toggle for mobile
        document.querySelectorAll('.dropdown > a').forEach(dropdown => {
            dropdown.addEventListener('click', function(e) {
                if (window.innerWidth <= 768) {
                    e.preventDefault();
                    const parent = this.parentElement;

                    // Fecha outros dropdowns abertos
                    document.querySelectorAll('.dropdown').forEach(d => {
                        if (d !== parent) d.classList.remove('active');
                    });

                    // Alterna o estado do dropdown clicado
                    parent.classList.toggle('active');
                }
            });
        });
    </script>
    
    <script>
(function () {
  const hero = document.querySelector('.hero');
  if (!hero) return;

  const speed = 0.30; // 0.20–0.40 = efeito suave

  let ticking = false;
  function update() {
    const rect = hero.getBoundingClientRect();
    const offset = -rect.top; // seção sobe => valor positivo
    hero.style.setProperty('--bg-shift', (offset * speed) + 'px');
    ticking = false;
  }
  function onScroll() {
    if (!ticking) {
      requestAnimationFrame(update);
      ticking = true;
    }
  }

  update();
  window.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll);
})();
</script>

<script>
(function () {
  const hero  = document.querySelector('.hero');
  const text  = document.querySelector('.hero-text');
  const image = document.querySelector('.hero-image');

  if (!hero || !text || !image) return;

  const strengthText  = 15; // deslocamento máximo do textoconst strengthImage = 25; // deslocamento máximo da imagem

  hero.addEventListener('mousemove', (e) => {
    const rect = hero.getBoundingClientRect();
    const x = e.clientX - rect.left; // posição X dentro do hero
    const y = e.clientY - rect.top;  // posição Y dentro do hero
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const moveXText  = ((x - centerX) / centerX) * strengthText;
    const moveYText  = ((y - centerY) / centerY) * strengthText;
    const moveXImage = ((x - centerX) / centerX) * strengthImage;
    const moveYImage = ((y - centerY) / centerY) * strengthImage;

    text.style.transform  = `translate(${moveXText}px, ${moveYText}px)`;
    image.style.transform = `translate(${moveXImage}px, ${moveYImage}px)`;
  });

  hero.addEventListener('mouseleave', () => {
    text.style.transform  = 'translate(0, 0)';
    image.style.transform = 'translate(0, 0)';
  });
})();
</script>



</body>

</html>

Latest requests

# Url Url Source Date
1 https://www.gorgonoid.com/ 2026-10-17 12:12:53
2 https://mmreducation.mn/ 2026-10-17 12:12:52
3 https://johnq900slb0.law-wiki.com/ 2026-10-17 12:12:52
4 https://wecammodels.com/ 2026-10-17 12:12:52
5 https://www.texarkanatwins.com/%25… 2026-10-17 12:12:50
6 https://cbd-hash50339.suomiblog.co… 2026-10-17 12:12:50
7 https://www.hotelaugustines.com/ 2026-10-17 12:12:49
8 https://elborgo.com/ 2026-10-17 12:12:49
9 http://errdoc.gabia.io/403.html 2026-10-17 12:12:49
10 https://diablo4zone.com/ 2026-10-17 12:12:48
11 https://ian5d60gms1.p2blogs.com/pr… 2026-10-17 12:12:47
12 https://tripple.net/ 2026-10-17 12:12:47
13 https://rd4krsk.ru/ 2026-10-17 12:12:47
14 https://rehore.org/ 2026-10-17 12:12:46
15 https://assertivenorthwest.com/ 2026-10-17 12:12:46
16 https://bill.tokyo-hot.com/ 2026-10-17 12:12:46
17 https://forum.cosmossoftware.com.n… 2026-10-17 12:12:46
18 https://www.thebolditalic.com/?gi=… 2026-10-17 12:12:45
19 https://www.octeaujoaillier.com/ 2026-10-17 12:12:45
20 https://ai-software-development.ne… 2026-10-17 12:12:44