/* ... Previous styles ... */
/* Include all previous CSS here or assume append if using replace, but I'll provide full update or append block logic if supported. 
   Since I'm rewriting, I'll paste the full previous CSS + Slider styles.
   Actually, replace_file_content implies full rewrite if not using chunks. 
   I will append slider styles to the existing file using read/append logic or just rewrite all.
   Rewriting all is safer to ensure order.
*/

:root {
    --primary-color: #ffd700;
    /* Amarelo JR Fumê */
    --accent-color: #007bff;
    /* Azul */
    --c-black: #050505;
    --c-dark-gray: #1a1a1a;
    --c-white: #ffffff;
    --c-text-gray: #b3b3b3;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--c-black);
    color: var(--c-white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header & Nav */
header {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 15px 0;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-bottom: 2px solid var(--primary-color);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 40px;
}

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

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

nav ul li a {
    color: var(--c-white);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* Hero Slider Section */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}

.slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Overlay to make text readable */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.hero-content h1 {
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--c-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-content span {
    color: var(--primary-color);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #ddd;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--c-black);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    margin-left: 10px;
}

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

/* Services Section */
.services {
    padding: 80px 0;
    background-color: var(--c-dark-gray);
    position: relative;
    z-index: 2;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.section-title span {
    border-bottom: 3px solid var(--accent-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--c-black);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s;
    border: 1px solid #333;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
}

.service-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 15px;
    color: var(--c-white);
}

.service-card p {
    color: var(--c-text-gray);
    font-size: 0.9rem;
}

/* Footer */
footer {
    background-color: #000;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #333;
    color: var(--c-text-gray);
    position: relative;
    z-index: 2;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    nav ul {
        display: none;
    }

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

/* Login Page Specifics Preservation */
body.login-page {
    background: url('/img/bg_login.png') no-repeat center center fixed;
    background-size: cover;
}

/* Login Page Restoration */
.login-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.login-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2;
    /* Ensure above background */
}

.image-section {
    display: none;
    /* Hidden on mobile */
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.6);
    /* Semi-transparent dark bg */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.logo-container img {
    height: 60px;
    margin-bottom: 20px;
}

.login-card h2 {
    color: var(--c-white);
    margin-bottom: 30px;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--c-text-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: var(--c-white);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input[type="text"]:focus {
    border-color: var(--primary-color);
}

/* PIN Input Styles */
.pin-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pin-input {
    width: 22%;
    /* 4 inputs ~ 25% each minus gap */
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: var(--c-white);
    outline: none;
    transition: all 0.3s;
}

.pin-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.btn-login {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, var(--primary-color), #e6c200);
    border: none;
    border-radius: 5px;
    color: var(--c-black);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 20px;
}

.btn-login:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

/* Desktop View */
@media (min-width: 768px) {
    .image-section {
        display: block;
        flex: 1.5;
        /* Larger image area */
        /* Use the existing body background or explicit one */
        /* Since body has background, making this transparent shows it. 
           But if we want a different look on desktop, we can override. 
           Let's assume the body matches both. */
        position: relative;
    }

    .login-section {
        max-width: 450px;
        /* Fixed width sidebar on desktop */
        background: var(--c-black);
        border-right: 1px solid #222;
        justify-content: flex-start;
        /* Align to top or center? Center is safe */
        padding: 40px;
        /* Reset padding if needed */

        /* On desktop, we want to hide the body background behind this section */
        z-index: 3;
    }

    .login-card {
        background: transparent;
        /* Remove card bg on desktop since sidebar is already dark */
        box-shadow: none;
        border: none;
        padding: 0;
        text-align: left;
        /* Require left align per user request */
        width: 100%;
    }

    .login-card h2 {
        text-align: left;
    }

    .logo-container {
        text-align: left;
    }

    .logo-container img {
        height: 80px;
        /* Larger logo on desktop */
        margin-left: -5px;
    }

    .form-group label {
        text-align: left;
    }

    /* Ensure PWA banners etc don't cover login inputs if fixed */
}