:root {
      --brand: #0d6efd; /* Azul Bootstrap */
      --brand-2: #6610f2; /* Roxo */
      --soft: 14px; /* raio padrão */
    }

    html, body { height: 100%; }
    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: #f8fafc;
      color: #0b1727;
    }

    /* Header fixo com blur (elevação sutil) */
    .navbar-blur {
      backdrop-filter: saturate(120%) blur(8px);
      -webkit-backdrop-filter: saturate(120%) blur(8px);
      box-shadow: 0 6px 20px rgba(13, 110, 253, 0.08);
    }

    /* Cards de produto: foco em imagem adaptável */
    .product-card {
      border: 0;
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(2, 8, 20, 0.06);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(2, 8, 20, 0.12);
    }

    /* Carrossel do produto: garante adaptação de tamanhos diversos */
    .product-carousel {
      background: #0b1524;
      position: relative;
    }
    .product-carousel .ratio {
      --bs-aspect-ratio: 100%; /* quadrado por padrão (mobile) */
    }
    @media (min-width: 576px) {
      .product-carousel .ratio { --bs-aspect-ratio: 75%; }
    }
    @media (min-width: 992px) {
      .product-carousel .ratio { --bs-aspect-ratio: 66.66%; }
    }
    .product-img {
      width: 100%; height: 100%;
      object-fit: contain; /* mantém proporção sem crop */
      object-position: center;
      background: linear-gradient(180deg, #0b1524, #0d1a31);
    }

    /* Botão flutuante: WhatsApp & Instagram */
    .fab { position: fixed; right: 16px; z-index: 1050; }
    .fab-wa { bottom: 16px; }
    .fab-ig { bottom: 76px; }
    .fab .btn { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.15); }

    /* Animações suaves */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp .6s ease both; }

    /* Rodapé fixo em telas altas, com navegação */
    footer {
      background: #fff;
      box-shadow: 0 -8px 24px rgba(2, 8, 20, 0.06);
    }

    /* Acessibilidade: foco visível e suave */
    :focus-visible { outline: 3px solid rgba(13,110,253,.5); outline-offset: 2px; border-radius: 10px; }