:root {
  /* Maintained original color palette */
  --primary-color: #dab22f;
  --secondary-color: #503f00a9;

  --background: #0c0c0b;
  --background-secondary:#131312;
  --background-emphasis: #050505;

  --card-background: #181818;
  --card-background-light: #ffffff08;
  --border-color: #d4af3726;
  --text-emphasis:#ffffff;
  --text:#ffffffdb;
  --text-blurred:#888;
  --text-black:#000000;

  --gradient: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );

  --box-shadow-light: 0 7px 17px rgba(0, 0, 0, 0.12);
  --box-shadow-strong: 0 15px 35px rgba(0, 0, 0, 0.25);
  --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --font-reading: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{
    font-family: var(--font-reading);
    background:var(--background);
    color:var(--text-emphasis);
    line-height: 1.6;
}

/* =====================================
   TEXTOS
===================================== */

h1,h2,h3 {
  font-family: var(--font-display);
}

p,label {
  font-family: var(--font-reading);
}

a{

    color:inherit;
    text-decoration:none;

}

.title-emphasis {
    color: var(--primary-color);
}

/* =====================================
   Divider
===================================== */

.divider {
  max-width: 1200px;
  height: 1px;
  background: var(--primary-color);
}

/* =====================================
   Container
===================================== */
.container {
    width:min(1200px,90%);
    margin: 60px auto;
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-items: center;
}

/* =====================================
   Button
===================================== */

.btn{
  background: var(--card-background-light);
  border: none;
  padding: 0.85rem 1.25rem;
  border-radius: 99px;
  text-decoration: none;
  color: black;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

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

.primary-btn{
    background: var(--gradient);
    color: var(--text-emphasis);
}

.secondary-btn{

    background:transparent;

    border:1px solid var(--primary-color);

    color:var(--primary-color);

}

/* =====================================
   CARD
===================================== */

.card{

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:var(--card-background);

    border:1px solid var(--border-color);

    border-radius:14px;

    color:inherit;
    text-decoration:none;

    transition:.3s;

}

.simple-card{
    border:1px solid var(--primary-color);
    padding: 40px;
}

.simple-card:hover{
    transform:none;

    border-color:none;

    box-shadow:none;
}

.card:hover{

    transform:translateY(-2px);

    border-color:var(--primary-color);

    box-shadow:var(--box-shadow-strong);

}


/* =====================================
   CARD IMAGE
===================================== */

.card-image{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:260px;

}

.card-image img{

    width:100%;
    height:320px;
    

    object-fit:cover;

}


/* =====================================
   CARD CONTENT
===================================== */

.card-content{

    display:flex;
    flex-direction:column;
    justify-content: space-between;

    gap:12px;

    padding:22px;

    flex:1;

}


/* =====================================
   CARD BRAND
===================================== */

.card-brand{

    color:var(--primary-color);

    font-size:.8rem;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =====================================
   CARD TITLE
===================================== */

.card-title{

    font-size:1.15rem;

    line-height:1.4;

}


/* =====================================
   CARD DESCRIPTION
===================================== */

.card-description{
    color:var(--text);

    font-size:.95rem;

    line-height:1.6;

}


/* =====================================
   CARD PRICE
===================================== */

.card-price{

    display:flex;
    flex-direction:column;

    gap:5px;

}

.price-old{

    color:var(--text-blurred);

    font-size:.9rem;

    text-decoration:line-through;

}

.price-current{

    color:var(--primary-color);

    font-size:1.7rem;

    font-weight:bold;

}


/* =====================================
   CARD RATING
===================================== */

.card-rating{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--primary-color);

    font-size:.95rem;

}

.card-rating span{

    color:var(--text);

}


/* =====================================
   BADGE
===================================== */

.badge{

    position:absolute;

    top:15px;
    right:0;

    padding:6px 12px;

    border-radius:20px;

    font-size:.8rem;

    font-weight:700;

}

.badge-discount{
    padding: 10px;
    border-radius: 99px;
    background:var(--primary-color);

    color:var(--text-black);

}


/* =====================================
   TAGS
===================================== */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.tag{

    padding:6px 10px;

    border:1px solid var(--border-color);

    border-radius:20px;

    background:var(--secondary-color);

    color:var(--primary-color);

    font-size:.75rem;

}

/* ===================================
CTA
=================================== */

.cta {
  background: var(--background-emphasis);

  padding: 70px;

  text-align: center;
}

.cta h2 {
  font-size: 2.5rem;

  color: var(--primary-color);
}

.cta p {
  max-width: 650px;

  margin: 25px auto;
}

@media (max-width: 700px) {
  .cta {
    padding: 40px 25px;
  }

  .cta h2 {
    font-size: 2rem;
  }
}