/* ---------------------------------- */
        /* 1. Global Styles & Resets          */
        /* ---------------------------------- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /*
        * Styles are now applied to the .page-wrapper to avoid affecting
        * the global page scope.
        */
        .page-wrapper {
            font-family: "Urbanist", sans-serif;
            background-color: #1E1E1E;
            /* --background-light */
        }

        /* ---------------------------------- */
        /* 2. Hero Section                    */
        /* ---------------------------------- */
        .hero-section {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 90vh;
            min-height: 700px;
            background-image: url("https://lojagoldentec.vteximg.com.br/arquivos/Fonte500PlusHero-min.jpg");
            background-size: cover;
            background-position: center;
            color: #ffffff;
            /* --text-light */
        }

        .hero-container {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 1;
        }

        .hero-content {
            max-width: 60%;
            text-align: left;
        }

        .logo-image {
            width: 200px;
            height: auto;
            margin-bottom: 50px;
            color: #bccf00;
            /* --text-light */
            /* Initial SVG color */
            transition: color 0.3s ease-in-out;
            cursor: pointer;
        }

        .logo-image:hover {
            color: white;
            /* --brand-color-hover */
            /* SVG color on hover */
        }

        .logo-image .cls-1 {
            fill: currentColor;
            /* Applies parent color to SVG paths */
        }

        .product-name {
            font-size: 50px;
            font-weight: 500;
            margin-bottom: 0;
            margin-left: 6px;
        }

        .slogan {
            font-size: 100px;
            font-weight: 700;
            line-height: 0.9;
            text-transform: lowercase;
            margin-bottom: 90px;
        }

        /* --- NEW STYLE FOR BADGE --- */
        .hero-badge-image {
            width: 120px;
            height: auto;
            margin-top: -50px; /* Adjust vertical position relative to slogan */
            margin-left: 6px; /* Align with text */
        }
        /* --------------------------- */

        /* ---------------------------------- */
        /* 3. Reusable Section Styles         */
        /* ---------------------------------- */
        .content-section {
            background-color: #1E1E1E;
            /* --background-light */
            position: relative;
            z-index: 2;
            /* Ensures content is above the hero image */
        }

        .section-block {
            max-width: 1196px;
            margin: 0 auto 80px;
            text-align: center;
        }

        .section-block-black {
            margin: 0 auto 80px;
            text-align: center;
        }

        .section-title {
            font-size: 35px;
            font-weight: 500;
            color: white;
            /* --text-primary */
            margin-bottom: 5px;
            margin-top: -50px;
            /* Overlaps with the section above */
            padding-top: 40px;
        }

        .section-subtitle {
            font-size: 20px;
            font-weight: 400;
            color: #e8e8e8;
            /* --text-secondary */
            line-height: 1.6;
            max-width: 952px;
            margin: 0 auto;
            margin-bottom: 30px;
        }

        .section-block img,
        .section-block video {
            width: 100%;
            height: auto;
            max-width: 100%;
            border-radius: 10px;
            object-fit: cover;
        }

        .section-block .main-image {
            height: 600px;
        }
        
        /* Protections Grid Section */
		.protections-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr); /* Mobile default: 2 columns */
			gap: 24px;
			margin-top: 40px;
            margin-bottom: 0px;
		}

		.protection-item {
			background-color: #121212;
			border-radius: 12px;
			padding: 1.5rem 1rem;
			text-align: center;
			color: #ffffff;
            			margin-bottom: 40px;
		}

		.protection-title {
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 8px;
            color: #ffffff;
		}

		.protection-description {
			font-size: 16px;
			color: #e8e8e8;
			line-height: 1.5;
		}
        

        /* ---------------------------------- */
        /* 4. Specific Section Styles         */
        /* ---------------------------------- */

        /* Media Gallery (Two-column images) */
        .media-gallery-container {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 40px;
            flex-wrap: wrap;
            width: 100%;
        }

        .media-item {
            flex: 1;
            min-width: 280px;
            text-align: center;
        }

        .media-item img {
            background-color: #e8e8e8;
            margin-bottom: 16px;
            height: 350px;
            object-fit: cover;
            width: 100%;
        }

        .media-caption {
            font-size: 16px;
            font-weight: 400;
            color: #646464;
            line-height: 1.6;
            max-width: 350px;
            margin: 0 auto;
        }

        /* Connectivity Section */
        .connectivity-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* Mobile Default */
            gap: 24px;
            margin-top: 40px;
        }

        .connectivity-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            background-color: #121212;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: left;
            
        }

        .connectivity-item img { /* Alterado de 'svg' para 'img' */
    width: auto;
    height: 35px;
    flex-shrink: 0;
    border-radius: 0px;
            margin-right: 20px;

}

        .connectivity-item p {
            font-size: 16px;
            color: #ffffff;
            font-weight: 500;
        }

        /* Detailed Features Section */
        .features-detailed-section {
            padding-top: 40px;
        }

        .feature-detailed-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "text image";
            /* Default order */
            gap: 3rem;
            align-items: center;
            margin-bottom: 4rem;
        }

        .feature-detailed-row:last-child {
            margin-bottom: 0;
        }

        .feature-detailed-row.reverse {
            grid-template-areas: "image text";
            /* Reversed order */
        }

        .feature-detailed-row .feature-detailed-text {
            grid-area: text;
            text-align: left;
        }

        .feature-detailed-row .feature-detailed-image {
            grid-area: image;
        }

        .feature-detailed-text h3 {
            font-size: 35px;
            font-weight: 500;
            color: #111827;
            margin-bottom: 1rem;
        }

        .feature-detailed-text p {
            font-size: 1.125rem;
            /* 18px */
            color: #4b5563;
            line-height: 1.6;
        }

        .feature-detailed-image img {
            width: 100%;
            max-height: 300px;
            border-radius: 12px;
            object-fit: cover;
            display: block;
        }

        /* Lights Off Section */
        .lights-off-section {
            background: linear-gradient(to bottom, #8a905a, #000000);
            padding: 100px 0;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            min-height: 600px;
        }

        .lights-off-image {
            position: absolute;
            right: 0;
            top: 30%;
            transform: translateY(-50%);
            width: 90%;
            height: auto;
            z-index: 1;
        }

        .lights-off-content {
            max-width: 1196px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            color: #ffffff;
            text-align: left;
        }

        .lights-off-text-wrapper {
            max-width: 45%;
        }

        .lights-off-title {
            font-size: 35px;
            font-weight: 500;
            margin-bottom: 15px;
        }

        .lights-off-subtitle {
            font-size: 20px;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .lights-off-description {
            font-size: 20px;
            font-weight: 400;
            line-height: 1.6;
        }

 /* User Manual Section */
    .user-manual-section {
      width: 100%;
      background-color: #f9fafb;
      padding: 3rem 1rem;
    }

    .manual-container {
      max-width: 1196px;
      margin-left: auto;
      margin-right: auto;
    }



    .manual-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .download-card {
      background-color: #ffffff;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.3s ease;
      position: relative;
    }



    .card-icon {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      color: #bccf00;
      width: 45px;
      height: 45px;
    }

    .card-content {
      flex-grow: 1;
    }

    .card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #111827;
      margin: 0 0 0.5rem 0;
    }

    .card-info {
      font-size: 0.875rem;
      color: #4b5563;
      margin: 0;
      line-height: 1.5;
    }

    .card-info.last {
      margin-bottom: 1rem;
    }

    .card-language {
      font-size: 0.875rem;
      color: #1f2937;
      font-weight: 600;
      margin: 0;
    }

    /* Botão Animado */
    .btn {
      background-color: white;
      text-align: center;
      width: 192px;
      height: 56px;
      border-radius: 16px;
      position: relative;
      color: #1f2937;
      font-size: 18px;
      font-weight: 600;
      border: 1px solid #e5e7eb;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      margin-top: 1.5rem;
      text-decoration: none;
      display: inline-block;
      align-content: center;
    }

  

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }

    .btn .bg {
      background-color: #bccf00;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='white'%3E%3Cpath d='M352 96c0-17.7-14.3-32-32-32s-32 14.3-32 32V306.7L246.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L352 306.7V96zM160 384c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H480c35.3 0 64-28.7 64-64V448c0-35.3-28.7-64-64-64H433.1l-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L206.9 384H160zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      align-content: center;
      background-size: 22px;
      border-radius: 12px;
      height: 48px;
      width: 48px;
      position: absolute;
      left: 3px;
        right: 3px;
        bottom: 3px;
      top: 3px;
      z-index: 2;
      transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .btn:hover .bg {
      width: 184px;
    }

    .btn p {
      position: relative;
      z-index: 1;
      margin: 0;
      line-height: 56px;
      transform: translateX(8px);
      transition: color 0.3s ease 0.2s;
    }


    /* Acessibilidade - foco visível */
    .btn:focus-visible {
      outline: 3px solid #bccf00;
      outline-offset: 3px;
    }


        /* ---------------------------------- */
        /* 5. Responsive Design               */
        /* ---------------------------------- */

        @media (min-width: 992px) {
            .connectivity-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (min-width: 768px) {
            .manual-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
           
        }

        @media (max-width: 1200px) {
            .slogan {
                font-size: 75px;
            }

            .product-name {
                font-size: 40px;
            }

            .lights-off-image {
                width: 100%;
            }
        }

        @media (max-width: 992px) {
            .hero-content {
                max-width: 70%;
            }

            .section-title {
                font-size: 38px;
            }

            .section-subtitle,
            .media-caption {
                font-size: 20px;
            }

            .lights-off-text-wrapper {
                max-width: 60%;
            }

            .lights-off-title {
                font-size: 32px;
            }

            .lights-off-subtitle,
            .lights-off-description {
                font-size: 18px;
            }
        }

        @media (max-width: 768px) {
            .hero-section {
                height: 950px;
                min-height: 600px;
                align-items: flex-start;
                padding-top: 20px;
                background-image: url("https://lojagoldentec.vteximg.com.br/arquivos/Fonte500PlusHeroMob.jpg");
                background-color: #0b0b0b;
                background-position: 75% 55%;
                background-attachment: scroll;
                /* Important for mobile */
                margin-bottom: -50px;
            }

            .hero-content {
                max-width: 100%;
                text-align: center;
            }

            .logo-image {
                margin: 0 auto 20px;
            }

            .slogan {
                font-size: 55px;
                margin-bottom: 0;
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
            }
            
            /* --- NEW BADGE STYLE FOR MOBILE --- */
            .hero-badge-image {
                margin: 400px auto 0;
            }
            /* ---------------------------------- */

            .product-name {
                font-size: 32px;
            }

            .section-title {
                font-size: 32px;
                margin-top: -35px;
            }

            .section-subtitle,
            .media-caption {
                font-size: 18px;
                padding: 0 24px;
            }

            .section-block .main-image,
            .section-block img {
                height: 300px;
            }

            .section-block {
                padding: 0 18px;
            }

            /* Detailed Features Mobile */
            .feature-detailed-row,
            .feature-detailed-row.reverse {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin-bottom: 3rem;
                grid-template-areas: "text" "image";
                /* Consistent order: text on top, then image */
            }

            .feature-detailed-text {
                text-align: center;
            }

            .feature-detailed-text h3 {
                font-size: 26px;
                text-align: center;
            }

            .feature-detailed-text p {
                font-size: 16px;
                text-align: center;
            }

            /* Lights Off Section for Mobile */
            .lights-off-section {
                padding: 40px 24px;
                min-height: auto;
                flex-direction: column;
            }

            .lights-off-image {
                position: relative;
                order: 2;
                width: 190%;
                margin-top: 2rem;
                top: auto;
                transform: none;
                right: auto;
                opacity: 1;
                margin-bottom: 0;
                margin-right: 150px;
                margin-top: -60px;
            }

            .lights-off-content {
                position: relative;
                order: 1;
                top: auto;
                left: auto;
                transform: none;
                text-align: center;
                width: 100%;
            }

            .lights-off-text-wrapper {
                max-width: 100%;
            }
            
            /* Connectivity Item for Mobile */
            .connectivity-item {
                flex-direction: column;
                text-align: center;
            }
            
             .connectivity-item img{
               height: auto;
                margin: auto;
            }
            
             .protections-grid {
    /* Altera para 1 coluna, empilhando os itens */
grid-template-columns: repeat(2, 1fr);
        }
            
     
            /* --background-light */
        }
            
            
            

        @media (max-width: 480px) {
            .logo-image {
                width: 100px;
            }

            .slogan {
                font-size: 40px;
            }

            .product-name {
                font-size: 24px;
            }

            .section-title {
                font-size: 28px;
                font-weight: 500;
                margin-top: -50px;
            }

            .section-subtitle,
            .media-caption {
                font-size: 16px;
            }

            .lights-off-title {
                font-size: 28px;
            }
        }