:root {
        --brand: #FF4C4C;
        /* vermelho coral (principal) */
        --brand-dark: #CC3A3A;
        /* vermelho escuro (análoga) */
        --brand-soft: #FFA6A6;
        /* coral claro (análoga) */
        --accent: #3CB371;
        /* verde médio (complementar) */
        --ink: #2E2E2E;
        /* texto principal */
        --muted: #4A4A4A;
        /* texto secundário */
        --bg: #FFFFFF;
        /* fundo claro */
        --card: #F5F5F5;
        /* cartões */
        --line: #E8E8E8;
        /* linhas/bordas */
    }

    body {
        background: var(--bg);
        color: var(--ink);
    }

    .navbar {
        --bs-navbar-color: #4A4A4A;
        --bs-navbar-hover-color: #2E2E2E;
        background: rgba(255, 255, 255, .9);
        backdrop-filter: saturate(1.1) blur(8px);
        border-bottom: 1px solid var(--line);
        z-index: 1030;
    }

    .btn-brand {
        --bs-btn-bg: var(--brand);
        --bs-btn-border-color: var(--brand);
        --bs-btn-hover-bg: var(--brand-dark);
        --bs-btn-hover-border-color: var(--brand-dark);
        --bs-btn-color: #fff;
    }

    .btn-outline-light {
        --bs-btn-color: var(--brand);
        --bs-btn-border-color: var(--brand);
        --bs-btn-hover-bg: var(--brand);
        --bs-btn-hover-border-color: var(--brand);
        --bs-btn-hover-color: #fff;
    }

    .badge-brand {
        background: linear-gradient(90deg, var(--brand), var(--brand-soft));
        color: #fff
    }

    .hero {
        position: relative;
        min-height: 80vh;
        display: grid;
        place-items: center;
        padding-top: 5rem;
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 50% at 70% 30%, rgba(255, 76, 76, .08), transparent 50%);
    }

    .hero-card {
        background: #fff;
        border: 1px solid var(--line);
    }

    .glass {
        background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7));
        border: 1px solid rgba(204, 58, 58, .18);
    }

    .section-title span {
        color: #6b7280;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: .8rem
    }

    .section-title h2 {
        font-weight: 750;
        color: #111827
    }

    .card {
        background: var(--card);
        border: 1px solid var(--line);
        box-shadow: 0 6px 18px rgba(17, 17, 17, .05)
    }

    .price {
        font-size: 1.35rem;
        font-weight: 800;
        color: #111827
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: .8rem;
        background: rgba(255, 76, 76, .12);
        color: #CC3A3A
    }

    .rating i {
        color: var(--accent)
    }

    .footer a {
        color: #4A4A4A;
        text-decoration: none
    }

    .footer a:hover {
        color: var(--brand-dark)
    }

    .shadow-soft {
        box-shadow: 0 10px 30px rgba(17, 17, 17, .08)
    }

    .brand-gradient {
        background: linear-gradient(90deg, var(--brand), var(--brand-soft));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .form-control,
    .form-select {
        background: #fff;
        border-color: #ddd;
        color: #2E2E2E
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 .25rem rgba(255, 76, 76, .18)
    }

    .divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 76, 76, .22), transparent)
    }

    .logo {
        font-weight: 800;
        letter-spacing: .5px
    }

    .logo-header {
        max-height: 60px;
    }

    .logo .dot {
        color: var(--brand)
    }

    .opacity-85 {
        opacity: .85
    }

    .bg-stripes {
        background-image: repeating-linear-gradient(45deg, rgba(17, 17, 17, .04) 0, rgba(17, 17, 17, .04) 10px, transparent 10px, transparent 20px);
    }

    .text-secondary {
        color: var(--muted) !important
    }

    .text-info {
        color: var(--brand) !important
    }

    .link-brand {
        color: var(--brand);
        text-decoration: none
    }

    .link-brand:hover {
        text-decoration: underline
    }

    .link-slides a {
        z-index: 1000 !important;
    }

    /* Limita a altura das imagens do carrossel e mantém proporção */
    #galeriaZ20A .carousel-item img {
        width: 100%;
        height: 420px;
        /* ajuste conforme desejar */
        object-fit: contain;
        /* mostra a imagem inteira sem cortar */
        background: #f5f5f5;
        /* “moldura” neutra quando sobrar espaço */
    }

    /* Botão flutuante do WhatsApp */
    .whatsapp-float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
        background-color: #25d366;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-size: 30px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        transition: all 0.3s ease;

        /* novo: centraliza o ícone com flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .whatsapp-float:hover {
        background-color: #1ebe5d;
        transform: scale(1.1);
        color: #fff;
    }

    /* remove o truque de top:50% / translateY */
    .whatsapp-float i {
        position: static;
        transform: none;
    }


    /* Em telas maiores, dá mais altura */
    @media (min-width: 992px) {
        #galeriaZ20A .carousel-item img {
            height: 520px;
        }

        .img-banner {
            max-width: 400px;
        }
    }

    /* Thumbs uniformes */
    .thumb {
        height: 84px;
        object-fit: cover;
    }

    @media (max-width: 576px) {
        .whatsapp-float {
            bottom: 16px;
            right: 16px;
        }
    }