:root {
            --gold: #dbaa48;
            --gold-light: #f5e3bc;
            --terracotta: #705247;
            --ink: #151004;
            --green: #009b3a;
            --blue: #002776;
            --indigo: #5454af; 
            --muted: #705f57;
            --bg: #faf7f1;
            --card: #ffffff;
            --border: #e4d8c5;
                --font-display: Georgia, "Times New Roman", serif;
                --font-ui: Arial, Helvetica, sans-serif;
        }

        * { box-sizing: border-box; }
        body {
            margin: 0;
                font-family: var(--font-display);
            color: var(--ink);
            background: #fcfbf8;
            line-height: 1.6;
        }

        a { text-decoration: none; }

            h1, h2, h3 {
                font-family: var(--font-display);
                font-weight: 700;
                letter-spacing: 0;
            }

        .container {
            width: min(1120px, calc(100% - 2rem));
            margin: 0 auto;
        }

        header {
             background:var(--bg);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 5px 16px rgba(21, 16, 4, 0.04);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .brand-strip {
            display: none;
        }
       
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 5rem;
            gap: 1.5rem;
            padding: 0.55rem 0;
           
        }

        .brand {
            display: inline-flex;
            align-items: center;
            width: 190px;
            height: 48px;
            flex: 0 0 190px;
            overflow: hidden;
            position: relative;
            isolation: isolate;
        }

        .brand-submark {
            display: block;
            width: 38px;
            height: 46px;
            flex: 0 0 38px;
            overflow: hidden;
            position: relative;
            align-self: flex-end;
            margin-bottom: 0;
            z-index: 1;
        }

        .brand-submark img {
            display: block;
            width: 135px;
            max-width: none;
            height: auto;
            position: absolute;
            left: -50px;
            top: -25px;
        }

        .brand-wordmark {
            display: block;
            width: 360px;
            max-width: none;
            height: auto;
            position: absolute;
            left: -80px;
            top: -76px;
        }

        .topbar nav {
            display: flex;
            align-items: center;
            gap: clamp(1rem, 2.6vw, 2rem);
            margin: 0 auto;
            white-space: nowrap;
            background:var(--bg);
        }

        .topbar nav a {
            color: var(--ink);
                font-family: var(--font-ui);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .topbar nav a:hover,
        .collection-nav a:hover {
            color: var(--blue);
        }

        .collection-nav {
            display: flex;
            justify-content: center;
            gap: clamp(1.5rem, 6vw, 4.5rem);
            background: #f8f1e2;
            border-top: 1px solid #eee0c2;
            padding: 0.55rem 1rem;
        }

        .collection-nav a {
            color: var(--terracotta);
                font-family: var(--font-ui);
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.2rem;
            border-radius: 0.35rem;
            font-weight: 700;
                font-family: var(--font-ui);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .btn:hover { transform: translateY(-2px); }

        .btn-primary {
            text-align: center;
            color: var(--green);;
            box-shadow: 0 8px 20px rgba(219, 170, 72, 0.28);
        }

        .btn-secondary {
            text-align: center;
            color: var(--blue);
            box-shadow: 0 8px 20px rgba(219, 170, 72, 0.28);
            
        }

        .hero {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 2rem;
            padding: 3.4rem 0 2.5rem;
            align-items: center;
        }

        .hero::before {
            content: "";
            grid-column: 1 / -1;
            height: 3px;
            margin-bottom: -1.4rem;
            background: linear-gradient(90deg, var(--green) 0 33%, var(--gold) 33% 66%, var(--blue) 66% 100%);
        }

        .eyebrow {
            display: none;
        }

        h1 {
            text-align: center;
            font-size: clamp(2rem, 3.5vw, 3.2rem);
            margin: 0 0 1rem;
            line-height: 1.1;
        }

            h2 {
                text-align: center;
                font-size: clamp(1.65rem, 2.5vw, 2.2rem);
                line-height: 1.2;
                margin-top: 0;
            }

            h3 {
                text-align: center;
                line-height: 1.25;
            }

        .hero p {
            text-align: center;
            font-size: 1.05rem;
            color: var(--muted);
            margin: 0 0 1.3rem;
        }

        .hero-actions {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin: 1.5rem 0;
        }

        .hero-card {
         width: 100%; 
         height:auto;
        }

        .hero-model {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 28%;
            border-radius: 45%;
            margin-bottom: 1rem;
        }

        .hero-card .tag {
            display: inline-block;
            background: var(--gold);
            color: var(--ink);
            padding: 0.35rem 0.7rem;
            border-radius: 0.25rem;
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .hero-card h3 { margin: 0 0 0.6rem; }
            .hero-card p { color: #f7ead7; font-family: var(--font-ui); }

        .stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-top: 1rem;
            border-top: 1px solid var(--border);
            padding-top: 0.85rem;
        }

        .stats div {
            background: transparent;
            border-top: 0;
            border-radius: 0;
            padding: 0.2rem 0.5rem;
            text-align: center;
        }

        .stats strong { display: block; font-size: 1rem; }
        .stats div:nth-child(2) { border-color: var(--green); }
        .stats div:nth-child(3) { border-color: var(--blue); }

        section { padding: 2rem 0 0; }

        .section-title {
            text-align: center;
            margin-bottom: 1.2rem;
        }

        .section-title h2 { margin-bottom: 0.35rem; text-align:center; }
        .section-title p { color: var(--muted); margin: 0; text-align:center; }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .benefit-card{
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            padding: 1.2rem;
            box-shadow: 0 10px 24px rgba(112, 82, 71, 0.05);
        }

        .product-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            padding: 1.2rem;
            box-shadow: 0 10px 24px rgba(112, 82, 71, 0.05);
        }


        .product-card-p{
        width: 80%;
        height: 100%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        }

        .benefit-card h3, .product-card h3 { margin: 0.4rem 0; text-align: center;}
        .benefit-card p, .product-card p { color: var(--muted); margin: 0 0 0.4rem;  text-align: center;}

        .product-card-p h3 { margin: 0.1rem 0; }
        .product-card-p p { color: var(--muted); margin: 0 0 0.1rem; }

        .products-grid {
            display: grid;
            place-items: center;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-top: 1rem;
        }

        .products-grid-p{
            display: grid;
            place-items:center;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .product-visual {
            display: block;
            width: 100%;
            height: 240px;
            object-fit: cover;
            object-position: center;
            border-radius: 0.35rem;
            margin-bottom: 0.8rem;
        }

        .product-visual-p {
            align-self: center;
            display: block;
            max-width: auto;
            max-height: auto;
            object-fit: cover;
            object-position: center;
            border-radius: 0.35rem;
            margin-bottom: 0.rem;
        }

        /* Container do Slider */
.product-slider {
    position: relative;
    width: 60%;
    overflow: hidden;
    align-self: center;
}

/* Trilhos das Imagens */
.slider-track {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Ou ajuste de acordo com a proporção das suas imagens */
}

.slider-track .product-visual-p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.slider-track .product-visual-p.active {
    opacity: 1;
    pointer-events: auto;
}

/* Botões de Navegação (Anterior / Próximo) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: justify;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    transition: background 0.2s;
}

.slider-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.slider-btn.prev {
    left: 8px;
}

.slider-btn.next {
    right: 8px;
}

/* Indicadores (Bolinhas) */
.slider-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.dot.active {
    background-color: #fff;
    transform: scale(1.2);
}

        .price {
            font-weight: 800;
            color: var(--blue);
            margin: 0.6rem 0 0.8rem;
        }

        .product-card .btn {
            width: 100%;
            text-align: center;
        }

        .cta {
            background: linear-gradient(135deg, var(--gold) 0%, #eccb89 100%);
            border-left: 6px solid var(--terracotta);
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            margin: 2.5rem 0 3rem;
        }

        footer {
            text-align: center;
            color: var(--muted);
            padding: 0 0 2rem;
            font-size: 0.95rem;
        }

        @media (max-width: 900px) {
            .hero, .benefits-grid, .products-grid {
                grid-template-columns: 1fr;
            }

            .hero {
                padding-top: 2.2rem;
            }
        }

        @media (max-width: 640px) {
            .topbar {
                min-height: auto;
                padding: 1rem 0;
                flex-wrap: wrap;
                gap: 0.9rem;
            }

            nav a {
                margin: 0 0.35rem;
                font-size: 0.9rem;
            }

            .topbar .btn { width: 100%; text-align: center; }
            .brand { width: 174px; height: 46px; flex-basis: 174px; }
            .brand-submark { width: 34px; height: 43px; flex-basis: 34px; }
            .brand-submark img { width: 123px; left: -45px; top: -22px; }
            .brand-wordmark { width: 330px; left: -74px; top: -68px; }
                .topbar nav {
                    gap: 0.9rem;
                    margin: 0;
                    order: 3;
                    width: 100%;
                    justify-content: center;
                }

                .topbar nav a { font-size: 0.68rem; }
                .collection-nav { gap: 1.25rem; overflow-x: auto; justify-content: flex-start; }

            .stats {
                grid-template-columns: 1fr;
            }
        }