/* === CONTENEDOR GENERAL === */
.arte-wrapper{
  max-width:1200px;
  margin:40px auto 0;
  padding:0 40px;
}

/* === HERO TEXT === */
.arte-hero{
  text-align:center;
  margin-bottom:50px;
}

.arte-hero h1{
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
}

/* ✅ Texto desktop igual que INDEX */
.arte-hero p{
  font-size:16px;
  line-height:1.45;
  color: var(--body-text);
}

/* === TARJETAS DE ARTE === */
.arte-links{
  display:flex;
  justify-content:center;
  gap:60px;
  margin-bottom:80px;
}

.arte-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-decoration:none;
  color:#121212;
  text-align:center;
  font-weight:400;
  transition:opacity .25s ease;
}

.arte-card img{
  width:100%;
  max-width:260px;
  height:auto;
  border-radius:10px;
  object-fit:cover;
  margin-left:auto;
  margin-right:auto;
}

/* ✅ títulos más elegantes */
.arte-card span{
  font-size:14px;
  font-weight:400;
  color:#444;
  letter-spacing:0.5px;
  text-transform:uppercase;
  display:inline-block;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}

/* === HOVER — sutil y elegante (solo desktop) === */
@media(min-width:861px){
  .arte-card:hover{
    opacity:.85;
  }
  .arte-card:hover span{
    border-bottom:1px solid #444;
  }
}

/* === MOBILE === */
@media(max-width:860px){

  .arte-wrapper{
    padding:0 16px;
    margin-top:60px;
  }

  .arte-hero{
    text-align:left;
    margin-bottom:32px;
  }

  .arte-hero h1{
    font-size:28px;
  }

  .arte-hero p{
    font-size:16px;
    color: var(--body-text);
  }

  .arte-links{
    flex-direction:column;
    gap:28px;
    margin-bottom:50px;
  }

  .arte-card{
    text-align:left;
  }

  .arte-card img{
    width:100%;
    max-width:100%;
  }

  .arte-card span{
    font-size:14px;
    font-weight:400;
    color:#444;
    letter-spacing:0.5px;
    text-transform:uppercase;
    border-bottom:none; /* nada en mobile */
  }
}

/* ✅ sin efectos extra */