... existing code ...

        /* Hero Section */
        .hero {
            background: var(--gradient-hero);
            padding: 3rem 0 4rem;
            text-align: center;
            position: relative;
        }

        .hero h1 {
            font-size: clamp(1.75rem, 7vw, 3rem);
            color: var(--white);
            margin-bottom: 1rem;
            text-shadow: 0 2px 20px rgba(0,0,0,0.2);
        }

        .hero h1 b {
            color: #FFD700;
        }

        .hero-subtitle {
            font-size: clamp(1rem, 4vw, 1.25rem);
            color: var(--white);
            margin-bottom: 2rem;
            text-shadow: 0 1px 10px rgba(0,0,0,0.2);
        }

        /* <CHANGE> Removed grid styles and using carousel instead */
        /* V7 Carousel - auto-sliding, one image at a time, modern and professional */
        .carousel-container {
            position: relative;
            max-width: 700px;
            margin: 2rem auto;
            overflow: hidden;
            border-radius: 0;
            min-height: 350px;
        }

        .carousel {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
        }

        .carousel-item {
            flex: 0 0 100%;
            width: 100%;
            min-height: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
        }

        .carousel-item img {
            width: 100%;
            height: 350px;
            object-fit: contain;
            display: block;
        }

        .carousel-indicators {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }

        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            padding: 0;
        }

        .carousel-indicator.active {
            background: var(--white);
            width: 24px;
            border-radius: 4px;
        }

... existing code ...

        @media (max-width: 768px) {
            .hero {
                padding: 2.5rem 0 3rem;
            }

            .carousel-item img {
                height: 300px;
            }

... existing code ...

        @media (min-width: 769px) {
            .nutritionist-content {
                grid-template-columns: 1fr 1fr;
                gap: 3rem;
            }

            .carousel-item img {
                height: 450px;
            }
        }

... existing code ...

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1>
                200 cafés da manhã
                <b>de nutri (com sabor)</b>
            </h1>
            <p class="hero-subtitle">
                Receitas de baixas calorias criadas pela nutri Maria Aguiar, com sabor delicioso de verdade.
            </p>

            <!-- <CHANGE> Replaced grid with carousel showing one image at a time -->
            <div class="carousel-container">
                <div class="carousel">
                    <div class="carousel-item">
                        <img src="images/fec84e0a9389fdc006a7dde8e0b3fee1-1.webp" alt="Panqueca fit de banana" loading="lazy">
                    </div>
                    <div class="carousel-item">
                        <img src="images/Bolo-de-Caneca-de-Chocolate-com-C