/* ==========================================================================
   BUTTONS.CSS — Component .btn
   Variants: --primary, --outline, --ghost
   ========================================================================== */

.btn {
   display: inline-block;
   padding: 0.75rem 1.75rem;
   font-family: var(--font-body);
   font-size: 0.85rem;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: 4px;
   border: 2px solid transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
   line-height: 1;
}

/* Botó Principal — Acció primària de la pàgina */
.btn--primary {
   background-color: var(--color-accent);
   color: var(--color-white);
   border-color: var(--color-accent);
}

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

.btn--secondary {
   background-color: transparent;
   color: var(--color-accent);
   border-color: var(--color-accent);
}

.btn--secondary:hover {
   background-color: rgba(232, 125, 82, 0.1);
   color: var(--color-accent);
   transform: translateY(-2px);
}

.btn--large {
   padding: 1rem 2rem;
   font-size: 1rem;
   letter-spacing: 1.5px;
}

/* Botó Outline — Acció secundària */
.btn--outline {
   background-color: transparent;
   color: var(--color-accent);
   border-color: var(--color-accent);
}

.btn--outline:hover {
   background-color: var(--color-accent);
   color: var(--color-white);
   transform: translateY(-2px);
}

/* Variant outline sobre fons fosc (hero) */
.btn--outline-light {
   background-color: transparent;
   color: var(--color-white);
   border-color: rgba(255, 255, 255, 0.7);
}

.btn--outline-light:hover {
   background-color: var(--color-white);
   color: var(--color-accent);
}

/* Botó Ghost — Navegació dins targetes */
.btn--ghost {
   background-color: transparent;
   color: var(--color-accent);
   border-color: transparent;
   padding-left: 0;
   padding-right: 0;
   letter-spacing: 0.5px;
}

.btn--ghost:hover {
   opacity: 0.75;
   transform: translateX(4px);
}

/* Ghost sobre fons fosc */
.btn--ghost-light {
   color: var(--color-text-main);
}

.btn--ghost-light:hover {
   color: var(--color-accent-light);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
   .btn {
      padding: 0.65rem 1.4rem;
      font-size: 0.8rem;
   }
}