.projects-container {
    position: relative;
    z-index: 999;
    padding: 100px 5%;
    box-sizing: border-box; /* Garante que o padding não quebre a largura total */
}

.project-box {
    display: flex;
    align-items: center; /* Mantém o alinhamento vertical centralizado */
    gap: 60px; /* Reduzi o gap de 80px para 60px para dar mais espaço aos elementos */
    margin-bottom: 120px;
    width: 100%; /* Container ocupa toda a largura disponível */
}

/* Inverte a posição apenas nos projetos pares */
.project-box:nth-child(even) {
    flex-direction: row-reverse;
    justify-content: space-between;
}

/* * === AJUSTE PRINCIPAL AQUI ===
 * Definimos o espaço exato que a Thumb deve ocupar.
 */
.project-demo {
    /* flex: grow shrink basis */
    flex: 0 0 55%; /* Não cresce, não encolhe, base fixa em 55% da largura do container */
    max-width: 55%; /* Garante que não passe disso */
}

/* Garante que a imagem preenche todo o container .project-demo fixo */
.project-thumb {
    width: 85%; /* Ocupa os 55% definidos no pai */
    height: auto;
    aspect-ratio: 16 / 9; /* Mantém o formato horizontal cinematográfico */
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: block;
}

/*
 * === AJUSTE PRINCIPAL AQUI ===
 * Definimos o espaço para o texto, deixando o restante para o gap.
 */
.project-about {
    flex: 0 0 35%; /* Não cresce, não encolhe, base fixa em 35% */
    max-width: 35%;
}

/* Opcional: Dando um trato na tipografia dos títulos e parágrafos */
.project-about h1 {
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(220, 235, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 5px;
    font-family: 'Work Sans', sans-serif;
}

.project-about .title {
    font-size: 60px;
    margin-top: 0;
    margin-bottom: 20px;
    font-family: "WesternBangBang", sans-serif;
    color: rgba(220, 235, 255, 0.75);
    font-weight: normal;
    letter-spacing: 3px;
}

.project-about .description {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.75);
  font-family: 'Work Sans', sans-serif;
  margin-top: 0;
}

.project-about .description p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.75);
  font-family: 'Work Sans', sans-serif;
  margin: 0 0 8px;
}

.script-tag {
  color: #c8a84b;
}

/* === PRICE TAG === */
.price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 20px 0 8px;
}

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.price-amount {
  font-family: 'Cinzel', serif;
  font-size: 38px;
  font-weight: 700;
  color: rgba(220, 235, 255, 0.9);
  letter-spacing: 2px;
  line-height: 1;
}

.price-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* === ORNAMENT DIVIDER === */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0;
}

.ornament-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid rgba(245, 241, 240, 0.2);
}

.ornament-divider span {
  color: #F5F1F0;
  font-size: 9px;
  opacity: 0.55;
  letter-spacing: 4px;
}

/* === BOTÃO PRIMARY (COMPRAR) === */
.btn-western {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.85);
  transition: color 0.25s, transform 0.15s;
  width: 100%;
  margin-bottom: 20px;
}

/* Cantos dourados animados */
.btn-western::before,
.btn-western::after,
.btn-western .corner-tr,
.btn-western .corner-bl {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  transition: width 0.25s, height 0.25s;
  pointer-events: none;
}

.btn-western::before {
  top: 0; left: 0;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
}

.btn-western::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
}

.btn-western .corner-tr {
  top: 0; right: 0;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
}

.btn-western .corner-bl {
  bottom: 0; left: 0;
  border-bottom: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
}

/* Bordas centrais */
.btn-western .edge-t,
.btn-western .edge-b { position: absolute; height: 1px; left: 14px; right: 14px; background: rgba(255, 255, 255,0.25); transition: background 0.25s; pointer-events: none; }
.btn-western .edge-t { top: 0; }
.btn-western .edge-b { bottom: 0; }
.btn-western .edge-l,
.btn-western .edge-r { position: absolute; width: 1px; top: 14px; bottom: 14px; background: rgba(255, 255, 255,0.25); transition: background 0.25s; pointer-events: none; }
.btn-western .edge-l { left: 0; }
.btn-western .edge-r { right: 0; }

.btn-western:hover { color: rgb(199, 199, 199); }
.btn-western:hover::before,
.btn-western:hover::after,
.btn-western:hover .corner-tr,
.btn-western:hover .corner-bl { width: 20px; height: 20px; }
.btn-western:hover .edge-t,
.btn-western:hover .edge-b,
.btn-western:hover .edge-l,
.btn-western:hover .edge-r { background: rgba(255, 240, 219, 0.55); }
.btn-western:active { transform: scale(0.97); }

/* === BOTÃO GHOST (SECONDARY) === */
.btn-western-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: transparent;
  cursor: pointer;
  border: 1px solid rgba(220, 235, 255, 0.18);
  outline: none;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.45);
  transition: all 0.25s;
  width: 100%;
}

.btn-western-ghost:hover {
  border-color: rgba(220, 235, 255, 0.35);
  color: rgba(220, 235, 255, 0.75);
}

/* === RESPONSIVIDADE (MOBILE) === */
/* Quando a tela for menor ou igual a 768px */
@media (max-width: 768px) {
    .projects-container {
        padding: 50px 3%; /* Reduz padding lateral no mobile */
    }

    .project-box,
    .project-box:nth-child(even) {
        flex-direction: column; /* Empilha o vídeo e o texto */
        gap: 20px; /* Reduz muito o espaço entre eles no celular */
        margin-bottom: 80px;
    }

    .project-demo,
    .project-about {
        width: 100%; /* Ocupam toda a largura */
        max-width: 100%; /* Remove as travas de porcentagem */
        flex: 0 0 100%; /* Base 100% no mobile */
    }

    .project-about {
        text-align: center; /* Centraliza textos no celular para ficar mais elegante */
    }
}