/* =====================================================================
   07 · PINTA TU TAZA / RUSTIK ART CAFÉ (id="art-cafe")
   Versión corta para el inicio, con la forma de la versión 3:
   recuadro redondeado con la taza · texto · 3 mini packs · botón.
   El detalle completo está en artcafe.html (estilos en css/paginas/art-cafe.css).
   ===================================================================== */

.art-cafe__grilla {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* Recuadro crema con esquinas redondeadas y la taza animada */
.art-cafe__ilustracion {
  position: relative;
  height: 560px;
  border-radius: 32px;
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-cafe__ilustracion img { width: 360px; height: 360px; }

.art-cafe__nuevo {
  position: absolute; left: 22px; top: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--negro); color: var(--texto);
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
}

.art-cafe__texto { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.art-cafe__descripcion { font-size: 18px; line-height: 1.6; color: var(--texto-2); max-width: 540px; }

/* Los 3 mini packs */
.art-cafe__packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }

.mini-pack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  color: var(--texto);
  text-decoration: none;
  transition: transform var(--transicion), border-color var(--transicion);
}
.mini-pack:hover { transform: translateY(-4px); border-color: var(--cobre); }

.mini-pack__numero { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--cobre-instagram); }   /* PRUEBA: antes var(--cobre) */
.mini-pack__nombre { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.mini-pack__precio { font-size: 16px; font-weight: 700; }

/* El pack completo va en cobre */
.mini-pack--destacado { background: var(--cobre); border-color: var(--cobre); color: var(--negro); }
.mini-pack--destacado .mini-pack__numero { color: var(--negro); }

/* "Solo el kit": ocupa todo el ancho bajo los 3 packs, con borde punteado (igual que en artcafe.html) */
.mini-pack--kit { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; border-style: dashed; border-color: var(--cobre); }
.mini-pack--kit .mini-pack__numero { order: -1; }


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .art-cafe__grilla { grid-template-columns: 1fr; }
  .art-cafe__ilustracion { height: 440px; }
  .art-cafe__ilustracion img { width: 300px; height: 300px; }
}

@media (max-width: 700px) {
  .art-cafe__ilustracion { height: 340px; border-radius: 24px; }
  .art-cafe__ilustracion img { width: 240px; height: 240px; }
  .art-cafe__packs { grid-template-columns: 1fr; }
  .mini-pack { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
  .mini-pack__numero { width: 100%; }
  .art-cafe__texto .pildora { align-self: stretch; }
}